Change language
Python.Engineering Wiki Onglets Javascript

Onglets Javascript

__main__ Python module | absolute | Bootstrap JavaScript library | code Python module | COM PHP module | Ctype PHP module | dis Python module | Ev PHP module | html Python module | iat | io Python module | JavaScript | jQuery JavaScript library | os Python module | parallel PHP module | pty Python module | Python Development | Python functions | Radius PHP module | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module
Michael Zippo Michael Zippo 04.11.2021

Les onglets CSS sont vraiment parfaits pour afficher des informations connexes dans un seul endroit facile à naviguer. Ils ressemblent essentiellement à des séparateurs à onglets que vous verriez dans une boîte de recettes ou un classeur. Exemples de sites Web qui utilisent les onglets de navigation :

Lorsque vous regardez ces deux sites, réfléchissez aux avantages de l`utilisation d`un tel composant de l`interface utilisateur sur les sites. Quels problèmes doivent être résolus ? Quel type d`informations les onglets de navigation seraient-ils un bon travail de développement ?

Lorsque vous avez besoin d`accéder à une arborescence de l`interface utilisateur qui organise le texte ou les informations en composants significatifs et les affiche à l`écran sans prenant trop de place, les onglets de navigation sont un choix judicieux. Nous parlerons des onglets de navigation plus en profondeur lorsque nous commencerons à utiliser JavaScript, jQuery et / ou Bootstrap, mais il existe également un travail formel que nous pourrions utiliser et qui ne nécessite que du HTML et du CSS purs. Jetons un coup d`œil à la configuration :

Configurez votre code HTML :

Allez-y et configurez votre code HTML standard avec un conteneur à l`intérieur du corps qui servira de conteneur principal pour le projet . Vous pouvez le nommer comme bon vous semble dans l`attribut class, mais je le nommerai class = "tabs". Jusqu`à présent, votre code HTML devrait ressembler à ceci : < ! DOCTYPE html>


Dans le " tabs" et appeler chacun avec une classe tab. Cela représente chacune des quatre cartes que nous allons écrire aujourd`hui. Il contiendra notre entrée, les étiquettes des onglets et le contenu des onglets. Créons des conteneurs vides pour tout cela : < ! DOCTYPE html>

< /html>

À l`intérieur du nom de la classe de contenu se trouvera notre contenu. Vous pouvez utiliser n`importe quel contenu, mais il est courant d`utiliser le contenu associé dans un onglet

Il est temps de commencer le CSS :

Lorsqu`il s`agit d`écrire du CSS, commencez par le plus grand conteneur et descendez jusqu`au plus petit conteneur, voici le minimum que nous devons faire pour y parvenir. travail :

  1. Définir un sélecteur générique sur une boîte d`étalonnage . border-box
  2. Dans le conteneur principal, vous devez avoir la propriété display définie sur flex et la position définie sur relative. Affichage : flex permet de placer les cartes les unes à côté des autres dans une rangée, et la position relative agit donc comme une limite ou une clôture qui contient le contenu de la carte.

À ce stade, vous verrons ce qui ressemble à quatre blocs de texte avec un bouton radio et du contenu, nous devons donc trouver un moyen d`afficher le bloc sélectionné et de masquer les autres blocs.


  1. Dans le .tab container , nous allons fixer le style du label :.
    1. Bordure solide de 1 px dans la couleur souhaitée
    2. Remplissage : 5 px, 10 px - ajoutera de l`espace autour du texte de l`étiquette
    3. 10px border-radius , 10px, 0px, 0px - cela fera ressembler l`étiquette à une carte traditionnelle.

Si vous vérifiez votre travail maintenant, vous verrez que les étiquettes ont les boutons radio circulaires à leur gauche. Ainsi, cela ressemble plus à un onglet traditionnel, mais pour conserver l`attribut sélectionné du bouton, nous devons masquer la partie circulaire du bouton radio.

  1. Pour réellement sélectionner le bouton, nous utilisez .tab [type = `radio`]. Pour le masquer, nous avons mis en place un affichage inégalé.

Nous devons donc approcher le contenu réel afin qu`il n`affiche qu`un seul onglet à la fois.

  1. Sélectionnez le contenu div puis définissez la position absolue sur. Lorsque la position absolue est définie, la div peut être définie dans le parent relatif. En utilisant haut, droite, gauche et bas, vous pouvez définir le contenu où vous voulez dans la div parent. Dans ce cas, définissez les propriétés gauche et droite sur 0. Nous souhaitons également créer une bordure et définir une couleur d`arrière-plan sur une couleur non transparente.
  1. Ajustement du z- index de l`onglet sélectionné amènera le panneau de cet onglet au premier plan. Pour cela, sélectionnez le bouton sélectionné et son contenu. Pour ce faire, utilisez-nous [type = `radio`] : coché ~ label ~ .content. Le "~" entre les éléments en CSS nous indique que nous voulons la classe de contenu qui apparaît après un élément d`étiquette qui apparaît après un bouton radio sélectionné.
    1. Pour afficher l`onglet actif, set [type = `radio`] : coché ~ étiquette sur une couleur d`arrière-plan différente.

      2. Désormais, lorsque l`utilisateur clique sur chacun des onglets, il devrait pouvoir basculer entre eux sans voir le contenu des autres panneaux C`est le minimum nécessaire pour que les onglets de navigation fonctionnent Essayer de jouer avec les CSS pour changer le style ! wp-bloc-CodeMirror blocs-code-block"> 

          
      </pre> CSS tabs