JavaScript Tabs - Créer des pages Web facilement Tabbed
Cliquez sur le lien ci-dessous pour voir une page à onglets en action:
Dans ce tutoriel, vous apprendrez comment cette page à onglets est mis en place. Vous pouvez ensuite utiliser le code et des idées pour créer vos propres pages Web à onglets. Commençons!
Création du code HTML de la page à onglets
Le code HTML pour les onglets et le contenu est très simple. Vous pouvez stocker le contenu de chaque onglet dans un élément div avec une classe de tabContent et un identifiant unique pour référence. Voici la première du contenu 3 onglet div s dans l'exemple:
Les onglets sont eux-mêmes de simples liens dans une liste non numérotée:
Vous pouvez ajouter autant d'onglets que vous le souhaitez sur la page. Ajoutez simplement une nouvelle div de contenu et de lui donner un identifiant unique. puis ajouter un lien vers elle dans la liste des onglets.
Création du CSS
Certains CSS est nécessaire afin de rendre les onglets ressemblent à onglets (et les rendre agréables à regarder):
Ces règles CSS fonctionnent comme suit:
corps Ceci définit une belle taille de la police et la police pour la page. ul # onglets Styles de la liste des onglets, en éteignant points de balle. ul # onglets li L'affichage: en ligne; biens les onglets apparaissent sur la page. ul # onglets li un Styles les liens au sein de la liste. Chaque lien est donné une bordure autour de tous les côtés, sauf le fond, de sorte que l'onglet actif se marie parfaitement avec son contenu div ci-dessous. ul # onglets li a: hover Faits saillants un onglet lorsque planait au-dessus avec la souris. ul # onglets li a.selected Styles un onglet sélectionné en lui donnant un fond plus clair et le texte en gras, et le rendre plus grand. Notez que le rembourrage inférieur est porté à 0.38em pour vous assurer que l'onglet se confond avec la div contenu. div.tabContent Définit un style pour les zones de contenu onglet afin qu'ils correspondent à la conception de l'onglet. div.tabContent.hide Utilisé pour cacher les onglets non sélectionnés.
- Joindre un gestionnaire d'événements onclick showTab () à chacun des liens de l'onglet.
- Cachez tous les div de contenu s, sauf la première, de sorte que seul le contenu de gauche onglet est visible lorsque la page se charge.
- Lorsqu'un onglet est cliqué, showTab () affiche le contenu de l'onglet en cours, et se cache tout autre contenu onglet div s. Il souligne également l'onglet cliqué et assombrit les autres onglets.
Quatre fonctions contrôlent les onglets:
- init () met en place des languettes.
- showTab () affiche le contenu d'un onglet cliqué et met en évidence l'onglet.
- getFirstChildWithTagName () est une fonction d'assistance qui récupère le premier enfant d'un élément qui a donné un nom de balise donné.
- getHash () est une autre fonction courte d'aide qui prend une URL et renvoie la partie de l'URL qui apparaît après le symbole dièse (#).
Voici comment ces fonctions fonctionnent.
La fonction init ()
Le premier, et le plus complexe, est fonction init (). Elle est appelée lorsque la page se charge, grâce à l'événement onload de l'élément du corps:
Voici la fonction elle-même:
Cette fonction fait 3 choses:
- Il boucle à travers tous les éléments li dans les onglets liste non ordonnée. Pour chaque élément li, il appelle la fonction d'aide getFirstChildWithTagName () pour récupérer l'un élément de liaison à l'intérieur. Ensuite, il appelle la fonction d'aide getHash () pour extraire la partie de l'URL après le hachage du lien; c'est l'ID de la div de contenu correspondant. L'élément de liaison est ensuite stocké par ID dans le tableau tabLinks, et la div contenu est stocké par ID dans le tableau contentDivs.
- Il attribue une fonction de gestionnaire d'événements onclick appelé showTab () à chaque lien onglet, et met en évidence le premier onglet en définissant sa classe CSS à « sélectionné ».
- Il se cache tout div de contenu s, sauf la première en réglant chaque div « classe CSS s pour « cacher tabContent ».
Alors que init () fonctionne quand le chargement de la page, assurez-vous de l'enregistrer comme l'événement de l'élément du corps onload du gestionnaire:
La fonction showTab ()
showTab () est appelée à chaque fois qu'un lien onglet est cliqué. Il met en évidence l'onglet sélectionné et affiche la div de contenu associé. Il assombrit aussi tous les autres onglets et cache tous les autres div contenu de:
La fonction extrait l'ID sélectionnée de l'attribut href du lien cliqué et le stocke dans SelectedID. Il boucle ensuite par tous les ID. Pour l'ID sélectionné, il met en évidence l'onglet correspondant et affiche la div de contenu; pour tous les autres ID il assombrit l'onglet et se cache la div contenu. Il fait tout cela en définissant des classes CSS sur les liens de l'onglet et le contenu div s.
Enfin, la fonction retourne false pour empêcher le navigateur de suivre le lien cliqué et en ajoutant le lien vers l'historique du navigateur.
La fonction getFirstChildWithTagName ()
Cette fonction d'aide retourne le premier enfant d'un élément spécifié qui correspond à un nom de balise spécifié. init () appelle cette fonction pour récupérer l'élément a (link) à l'intérieur de chaque élément de liste dans la liste des onglets.
La fonction boucle à travers les nœuds enfants de l'élément jusqu'à ce qu'il trouve un nœud qui correspond tagName. Il retourne ensuite le nœud.
En savoir plus sur les propriétés childNodes et nodeName dans l'article regardant à l'intérieur des éléments de page DOM.
La fonction getHash ()
La fonction d'aide getHash () renvoie la partie d'une URL après tout symbole de hachage. Utilisé par init () et showTab () pour extraire le contenu ID div référencé dans un lien de tabulation.
Mettre ensemble
Ne hésitez pas à utiliser ce code dans vos propres pages Web. Bonne tabbing!
Partagez cette page
Cela a été très utile, merci! Je suis une sorte de nouveau à cela, quelqu'un pourrait-il me aider à appliquer les transitions entre les onglets quand il affiche le contenu? Merci.
Vous pouvez utiliser différentes façons de créer des onglets et le contenu de l'onglet.
contenu Tab peut ajouté que lorsque l'onglet obtient le focus.
Vous pouvez rappeler l'onglet sélectionné. onglet sélectionné ouvre immediatelly après l'ouverture de la page.
Vous pouvez créer des onglets à l'intérieur de l'onglet.
Arrière-plan personnalisé de l'onglet est disponible.
Poster une réponse
Pour poster des réponses que vous devez être membre. Pas encore membre? L'inscription est gratuite, facile et ne prend qu'une minute. S'inscrire maintenant .