Ce guide expliquera comment créer des onglets avec CSS et JavaScript.
Comment créer des onglets avec CSS et JavaScript ?
Cette section fournit des instructions étape par étape pour la création d'onglets avec CSS et JavaScript.
Étape 1 : Créer une structure d'onglets à l'aide de HTML
Tout d’abord, regardez le code HTML qui crée la structure des onglets HTML :
< identifiant div = 'onglet1' sur clic = 'd'abord()' > Maison div >
< identifiant div = 'onglet2' sur clic = 'deuxième();' > À propos div >
< identifiant div = 'onglet3' sur clic = 'troisième();' > Contactez-nous div >
< br />
< identifiant div = 'suite1' > Bienvenue sur Linuxhint ! div >
< identifiant div = 'suite2' > ENSEIGNEMENT TECHNOLOGIQUE
Nous avons créé de nombreux produits pour vous aider à en apprendre davantage sur Linux, la programmation, l'informatique et bien plus encore.
div >
< identifiant div = 'suite3' >
Vous pouvez contacter notre équipe à l'adresse suivante : éditeur AT linuxhint DOT com.
div >
Dans les lignes de code ci-dessus :
- Le ' La balise ' ajoute un élément div avec un identifiant ' tab1 ' et un ' attaché ' sur clic ' événement pour exécuter le lien ' d'abord() 'fonctionne lorsqu'on clique dessus. Cet élément fait office d'onglet HTML.
- La méthode ci-dessus est appliquée pour les deux éléments div suivants.
- Le '
La balise ' ajoute un saut de ligne.- Le '
'La balise insère à nouveau un élément div ayant un identifiant attribué' cont1 '. Cet élément affiche le contenu de l'onglet créé dans un bloc.- Les deux suivants »
Les balises ' ajoutent également des éléments div avec leurs identifiants attribués.
Étape 2 : onglets de style à l'aide de CSSMaintenant, appliquez les propriétés de style CSS pour personnaliser les onglets et leur contenu selon votre choix :
< style >
#onglet1, #onglet2, #onglet3 {
flotter : gauche ;
rembourrage : 5px 10px 5px 10px ;
arrière-plan : rouge-orange ;
couleur : #FFFFFF ;
marge : 0px 5px 0px 5px ;
le curseur : aiguille ;
frontière - rayon : 3px ;
}
#tab1 : survolez, #tab2 : survolez, #tab3 : flotter {
arrière-plan : vert ;
}
#suite1, #suite2, #suite3 {
largeur : 300px ;
hauteur : 100px ;
rembourrage : 40px ;
Police de caractère - taille : moyen ;
Police de caractère - famille : « Times New Roman » , Times, empattement ;
frontière : 2px rouge orange uni ;
frontière - rayon : 7px ;
afficher : aucun ;
}
style >Dans l'extrait de code indiqué :
- Tout d’abord, accédez au « onglets ' en utilisant leurs identifiants attribués et personnalisez-les via les propriétés de style suivantes (float, padding, background, color, margin : 0px 5px 0px 5px, curseur et border-radius).
- Ensuite, joignez le « flotter ' Gestionnaire d'événements avec les onglets pour modifier leurs couleurs d'arrière-plan lorsque la souris de l'utilisateur les survole.
- Après cela, accédez au « contenu des onglets ' stocké dans les éléments div dont les identifiants sont ' cont1 ', ' cont2 ' et ' cont3 '. Maintenant, appliquez-leur les propriétés de style suivantes (largeur, hauteur, remplissage, taille de police, famille de polices, bordure, rayon de bordure et affichage).
Étape 3 : ajouter des fonctionnalités aux onglets à l'aide de JavaScriptEnfin, ajoutez des fonctionnalités aux onglets créés à l'aide de JavaScript :
< scénario >
fonction d'abord ( ) {
document. getElementById ( 'suite1' ) . style . afficher = 'bloc' ;
document. getElementById ( 'suite2' ) . style . afficher = 'aucun' ;
document. getElementById ( 'suite3' ) . style . afficher = 'aucun' ;
}
fonction seconde ( ) {
document. getElementById ( 'suite2' ) . style . afficher = 'bloc' ;
document. getElementById ( 'suite1' ) . style . afficher = 'aucun' ;
document. getElementById ( 'suite3' ) . style . afficher = 'aucun' ;
}
fonction troisième ( ) {
document. getElementById ( 'suite3' ) . style . afficher = 'bloc' ;
document. getElementById ( 'suite1' ) . style . afficher = 'aucun' ;
document. getElementById ( 'suite2' ) . style . afficher = 'aucun'
}
scénario >Les lignes de code ci-dessus :
- Définir une fonction nommée « d'abord ».
- Dans cette définition de fonction, le « document.getElementById() La méthode ' accède à l'élément div dont l'identifiant est ' cont1 ' et applique le ' style « propriété avec un » bloc » valeur là-dessus. Cette propriété affichera le contenu de l'onglet sur lequel l'utilisateur clique.
- Ensuite, le « document.getElementById() » accède à un autre div et applique la propriété « style » ayant une valeur « aucun » pour la masquer. Cela masquera cet élément sur la page Web.
- La méthode ci-dessus est effectuée pour les éléments div suivants consultés. En effet, la fonction « first » affiche uniquement le contenu de l'onglet dont la valeur de la propriété « style » est « block » et masque les autres.
- La procédure ci-dessus est effectuée pour les prochaines fonctions « second() » et «third() ».
Sortir
On peut voir que les onglets sont créés avec succès et affichent leur contenu respectif lors du clic de l'utilisateur.
Conclusion
Pour créer des onglets, construisez d’abord leurs structures en utilisant « HTML », puis personnalisez-les à l’aide des propriétés de style CSS. Les propriétés de style sont ajoutées sans exporter de feuille de style supplémentaire. Ces propriétés rendent les onglets attrayants et accrocheurs. Une fois les onglets créés et personnalisés, utilisez ensuite le langage de programmation JavaScript pour leur ajouter des fonctionnalités. Ce guide a pratiquement expliqué la procédure complète pour créer des onglets avec CSS et JavaScript.