Die Beispiele in diesem Artikel teilen den Effekt der Registerkarte "Registerkarte JS" für Ihre Referenz. Der spezifische Inhalt ist wie folgt
<! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <title> tab </title> <style> *{Margin: 0; Polsterung: 0; Listenstil: Keine;} .box {width: 1000px; Überlauf: versteckt; Rand: 100px Auto 0px; } #title {line-height: 40px; Hintergrundfarbe: RGB (247.247,247); Schriftgröße: 16px; Schriftgewicht: fett; Farbe: RGB (102,102,102); Überlauf: versteckt; } #title span {float: links; Breite: 166px; Text-Align: Mitte; } #title span: hover { /*Farbe: schwarz;* / cursor: pointer; } #Content {Margin-Top: 20px; } #Content li {width: 1050px; Überlauf: versteckt; Anzeige: Keine; Hintergrundfarbe: RGB (247.247,247); } #Content li div {width: 156px; Rand-Rechts: 14px; float: links; Text-Align: Mitte; } #Content li div a {Schriftgröße: 14px; Farbe: Schwarz; Zeilenhöhe: 14px; /* float: links;*/ display: Inline-Block; Rand: 10px; } #Content li a: hover {color: #b70606; } #Content li div span {Schriftgröße: 16px; Zeilenhöhe: 16px; /*float: links;*/ display: block; Farbe: RGB (102,102,102); Rand: 10px; } #Content img {float: links; Breite: 155px; Höhe: 250px; } #title .Select {Hintergrundfarbe: RGB (10,167,112); Farbe: weiß; } #Content .show {display: block; } </style> </head> <body> <div> <p id = "title"> <span> hübsch </span> <span> Beauty </span> <span> PET </span> <span> Film </span> <span> League der Legenden </span> <span> musik </p> <ul <ul id = "content"> <li> <div> <div> <div> <img> <img Src = "/shuaig"> <li> <divc. href="#">Jason Statham</a><span>Rare and cool</span></div> <div><img src="images/shuaige2.jpg"><a href="#">Jason Statham</a><span>Rare and cool</span></div> <div><img src="images/shuaige3.jpg"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/shuaige4.jpg"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/shuaige4.jpg"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/shuaige4.jpg"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/shuaige4.jpg"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/shuaige4.jpg"><a href="#">Tom Kreuzfahrt </a> <spannung> High-End, Atmosphärische und High-End </span> </div> <div> <img src = "Bilder/shuaige5.jpg"> <a href = "#"> juan fu </a> <span> low-key-luxury connotation </span> </div> </div> <img src href = "#"> juan fu </a> <spanner> Low-Key-Luxus hat Konnotation </span> </div> </li> <li> <div> <img src = "Images/meinv1.jpg"> <a href =#"> Schönheit </a> </a> </a> </diviöses Außung und sanft. src = "Bilder/meinv2.jpg"> <a href = "#"> Schönheit </a> <spenale> wütend und weich in Inneren </span> </div> <div> <img src = "Bilder/mEINV3.jpg"> <a href = "#"> Schönheit </a> </span> Cute Pouting -Sciss </span> </div> </div> </div> </div> </div> </div> </div> </div> </iMg> </span> </span> </div> </iMg> </span> </span> </div> </iMg> </span> </span> </div> </iMg> </iMg> </span> </span> </div> </div> </iMg> </spang. src = "Bilder/meinv4.jpg"> <a href = "#"> Schönheit </a> <spannung> süße Schmollsturmschere </span> </div> <div> <img src = "Bilder/meinv5.jpg"> <a href = "#"> Schönheit </a> <span src = "Bilder/meinv6.jpg"> <a href = "#"> Schönheit </a> <span> modisch, hell, frisch </span> </div> </li> <li> <div> <img src = "Bilder/chongwu1.jpg"> <a href = "#"> PETS </a> </a /a> </a- <div> <img src = "Bilder/chongwu2.jpeg"> <a href = "#"> pets </a> <span> 666 yuan pro </span> </div> <div> <img Src = "Bilder/chongwu3.jpg"> <a href = "#"> PETS </a> </a> </a /a> </a /a> </span> 666 yuan per </#"> PETs </a /a> </a> </a /a> </a- <div> <img src = "bilder/chongwu4.jpg"> <a href = "#"> pets </a> <span> 666 yuan pro </span> </div> <div> <img src = "Bilder/chongwu5.jpg"> <a href = "#"> PETS <//a> <spannes <spannes> <PETS </#"> PETS <//a> <spannes <spannes <spannes> </span> </span> </span> </span> </span> </span </span </span </span> </span> </#"> PETS <//a> <pents; src = "Images/chongwu6.jpg"> <a href = "#"> Pets </a> <Pan> 666 Stück pro </span> </div> </li> <li> <div> <img src = "Images/yingshi1.jpg"> <a href = "#"> Harry Potter -Serie </a> </a. <div> <img src = "Bilder/YingShi2.jpg"> <a href = "#"> Klassiker in den Klassikern </span> </div> <div> <img Src = "Bilder/yingshi2.jpg"> <a href = "#"> Drei -Narren machen eine Kreuzung. src = "Bilder/Yingshi3.jpg"> <a href = "#"> Transformers -Serien </a> <spencen> aufregend und aufregend </span> </div> <div> <img src = "Bilder/Yingshi4.jpg"> <a href = "#"> shengyu chihiro </a> </a> </a> </a> </a> <pspal> <pspal> <pspal> <pspal> <pspal> <pspal> <pspal> Die LOW -SANGHIGHIRO -DIVISHIRO </a> </a> </a> </a> </aa> </a> <pspal> <pspal> Die LOW -SOBLE. <div> <img src = "bilder/yingshi5.jpeg"> <a href = "#"> tongchi </a> <span> my chinchilla </span> </div> <img src = "bilder/yingshi6.jpg" Gump</a></div> </li> <li> <div><img src="images/lol1.jpg"><a href="#">Ice Sagittarius</a><span>The Wife</span></div> <div><img src="images/lol2.jpg"><a href="#">Daughter of Darkness</a></div> <div><img src = "Bilder/lol3.jpg"> <a href = "#"> explorer </a> <span> Ich bin der schönste im Spiel </span> </div> <div> <img src = "bilder/lol4.jpg"> <a href = "#"> staf </a> <pan> Torno; <div> <img src = "bilder/lol5.jpg"> <a href = "#"> türkische Millionen </a> </a> <spannung> Todesfälle Millionen Millionen Mal pro Tag. . </span> </div> <div> <img src = "bilder/lol6.jpg"> <a href = "#"> wewolves </a> <span> Vergrößern Sie es nicht für mich </span> </div> </li> <li> zu entwickeln. . . </li> </ul> </div> <script> var title = document.getElementById ('title'); var content = document.getElementById ('Inhalt'); var spans = title.getElementsByTagName ('span'); var lis = content.getElementsByTagName ('li'); für (var i = 0; i <Spans.Length; i ++) {Spans [i] .Index = i; Spans [i] .onclick = function () {for (var j = 0; j <spans.length; j ++) {Spans [j] .ClassName = ''; lis [j] .ClassName = ''; } this.className = 'select'; lis [this.index] .className = 'show'; }} </script> </body> </html>Der Schlüssel zu diesem Code sind die letzten beiden für Traverals und diesen Zeiger. Die erste für Traversal besteht darin, ein Klickereignis für jede Span -Schaltfläche hinzuzufügen, während die zweite für den Traversal bestimmen, auf welcher Schaltfläche derzeit geklickt wird. Der entsprechende Inhaltsteil ist leicht zu steuern und versteckt zu sein.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.