Les onglets sont utilisés dans un grand nombre de sites Web. Bien que les formulaires soient différents, le but à atteindre est le même. Ils sont généralement utilisés pour la classification ou pour économiser de l'espace sur les pages Web. un L'exemple de code de l'onglet est très polyvalent, je vais donc le partager avec vous ci-dessous.
L'exemple de code est le suivant :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 |
|
Le code ci-dessus implémente la fonction de l'onglet. Voici une brève introduction au processus d'implémentation.
1.Principe de mise en œuvre :
Cela peut sembler beaucoup de code, mais le principe est en réalité très simple. Nous ne présenterons ici que brièvement le principe. Pour plus de détails, vous pouvez vous référer aux commentaires du code et vous fier à votre propre réflexion. Dans l'état par défaut, le titre de l'onglet est affiché et le premier titre se voit attribuer la classe de style spécifiée. Seul le contenu du premier onglet est affiché et les autres sont masqués. Dans l'état par défaut, le premier effet sélectionné est obtenu. . Chaque titre d'onglet sera enregistré avec un gestionnaire d'événements spécifié lorsqu'une opération de clic ou de glissement est effectuée, le commutateur correspondant peut être réalisé, principalement via une traversée. Je ne le présenterai pas en détail ici.
2. Commentaires du code :
1.var EventUtil={}, déclare un objet littéral, qui implémente en interne les opérations d'obtention d'objets d'événement, d'objets source d'événement et de liaisons de fonctions de traitement d'événements, et est compatible avec les principaux navigateurs.
2. getEvent:function(event){return event? event: window.event;}, récupère l'objet événement, compatible avec tous les principaux navigateurs.
3.getTarget:function(event){return event.target||event.srcElement;}, obtenez l'objet source d'événement, compatible avec les principaux navigateurs.
4.addHandler:function(element,type,handler){}, la fonction de traitement des événements enregistrée est compatible avec tous les principaux navigateurs.
5.function tabSwitch(inClassName,triggerType){}, cette fonction peut enregistrer la fonction de traitement d'événement spécifiée pour l'objet spécifié. Elle a deux paramètres. Le premier paramètre est le nom de la classe de style, qui est utilisé pour obtenir l'objet avec ce nom. . Deux sont des types d'événements.
6.if(document.querySelectorAll), utilisé pour déterminer si le navigateur prend en charge la fonction querySelectorAll.
7.var tabs=document.querySelectorAll("." inClassName), s'il est pris en charge, obtient l'objet avec le nom de classe spécifié.
8.var divs=document.getElementsByTagName("div"), récupère la collection d'objets div.
9.var tabs=new Array(), crée un tableau pour stocker les objets div avec les classes de style spécifiées.
10.for(var k=0,lenDiv=divs.length;k
12. tabs.push(divs[k]), enregistrez ce div dans le tableau.
13.for(var j=0,len=tabs.length;j
15.(function(){})(), déclarez une fonction anonyme et exécutez-la.
16.var nameUl=tab.getElementsByTagName("ul")[0], récupère le premier de la collection ul, qui est la partie titre de l'onglet.
17.var content=tab.getElementsByTagName("ul")[1], récupère la partie contenu de l'onglet.
18.nameUl.getElementsByTagName("li")[0].className="selected", définit la valeur de classe de style du premier titre de la partie titre de l'onglet sur sélectionné.
19.content.getElementsByTagName("li")[0].style.display="block", définit la première partie du contenu de l'onglet à afficher.
20.EventUtil.addHandler(nameUl,triggerType,function(event){}), cette fonction est la partie essentielle de l'implémentation de l'onglet et comporte trois paramètres. Le premier paramètre est l'objet ul de la partie titre et le second est le. type d'événement. , la troisième fonction est la fonction de gestion des événements à enregistrer.
21.var event=EventUtil.getEvent(event), récupère l'objet événement.
22.var target=EventUtil.getTarget(event), récupère l'objet source de l'événement.
23.if(target.nodeName.toLowerCase()=="li"), déterminez si le nom d'étiquette de l'objet source d'événement est li.
24.var nameList=nameUl.getElementsByTagName("li"), obtient la collection d'éléments li dans la partie titre de l'onglet.
25.var contentList=content.getElementsByTagName("li"), récupère la combinaison des éléments li dans la partie contenu de l'onglet.
26.for(var i=0,len=nameList.length;i
28.contentList.style.display="none", masquez le li dans la partie contenu de chaque onglet.
29.if(nameList==target), si le titre li de l'index spécifié est l'objet source de l'événement, c'est-à-dire le li actuellement cliqué par la souris ou le li sur lequel la souris glisse.
30.nameList.className="selected", puis ajoutez-y la classe de style spécifiée.
31.contentList.style.display="block" affichera le contenu li correspondant à l'index.
Le contenu ci-dessus est présenté de manière relativement détaillée, avec du code et des commentaires. J'espère qu'il sera utile à tout le monde pour en apprendre davantage sur l'implémentation js des onglets.