Les exemples de cet article partagent l'effet de la commutation de l'onglet JS pour votre référence. Le contenu spécifique est le suivant
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> tab </ title> <style> * {margin: 0; rembourrage: 0; Style de liste: aucun;} .box {width: 1000px; débordement: caché; marge: 100px auto 0px; } #Title {line-height: 40px; Color en arrière-plan: RVB (247 247 247); taille de police: 16px; Police-poids: Bold; Couleur: RVB (102,102,102); débordement: caché; } #Title Span {float: Left; Largeur: 166px; Texte-aligne: Centre; } #Title Span: Hover {/ * couleur: noir; * / curseur: pointeur; } #Content {margin-top: 20px; } #Content li {width: 1050px; débordement: caché; Affichage: aucun; Color en arrière-plan: RVB (247 247 247); } #Content li div {width: 156px; marge-droite: 14px; flottant: à gauche; Texte-aligne: Centre; } #Content Li div a {Font-Size: 14px; Couleur: noir; hauteur de ligne: 14px; / * float: gauche; * / affichage: bloc en ligne; marge: 10px; } #Content Li A: Hover {Color: # B70606; } #Content li div span {Font-Size: 16px; Heure de ligne: 16px; / * float: gauche; * / affichage: bloc; Couleur: RVB (102,102,102); marge: 10px; } #Content img {float: Left; Largeur: 155px; hauteur: 250px; } #Title .Select {Background-Color: RGB (10.167,112); Couleur: blanc; } #Content .show {display: block; } </style></head><body> <div> <p id="title"> <span>Handsome</span> <span>Beauty</span> <span>Pet</span> <span>Movie</span> <span>League of Legends</span> <span>Music</span> </p> <ul id="content"> <li> <div><img src="images/shuaige1.jpg"><a href = "#"> Jason Statham </a> <span> rare et cool </span> </div> <div> <img src = "images / shuaige2.jpg"> <a href = "#"> Jason Statham </a> <span> Rare and Cool </pan> </v> <v> <img src = "images / shuage3.jpg" href = "#"> Tom Cruise </a> <span> haut de gamme, atmosphérique et haut de gamme </span> </div> <div> <img src = "images / shuaige4.jpg"> <a href = "#"> tom cruise </a> <pan> haute extrémité, atmosphérique et haut-end </pan> </v> <v> src = "images / shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <span> haut de gamme, atmosphérique et haut de gamme </span> </div> <v> <img src = "images / shuaige4.jpg"> <a href = "#"> tom croisière </a> High-Fen </span> </div> <div> <img src = "images / shuaige4.jpg"> <a href = "#"> tom croisière </a> <span> Cruise </a> <pan> haut de gamme, atmosphérique et haut de gamme </span> </div> <v> <img src = "images / shuaige5.jpg"> <a href = "#"> Juan fu </a> <span> Luxury à clé a une connotation </pan> </v> <v> <img src = "Images / shuage6.jpg" href = "#"> JUAN FU </a> <Span> Luxury Low-Key a une connotation </span> </div> </li> <li> <div> <img src = "Images / Meinv1.jpg"> <a href = "#"> Beauty </a> <pan> Furious à l'extérieur et doux à l'intérieur </pan> </v> <v> <v> <v> </aMg src = "images / meinv2.jpg"> <a href = "#"> beauté </a> <span> furieux à l'extérieur et doux à l'intérieur </span> </div> <div> <img src = "images / meinv3.jpg"> <a href = "#"> beauté </a> <pan> Scisseurs de bouton </pandé> src = "images / meinv4.jpg"> <a href = "#"> beauté </a> <span> ciseaux de mouting mignons </span> </div> <div> <img src = "images / meinv5.jpg"> <a href = "#"> beauté </a> <span> en mode, brillant, frais </pan> </p> src = "images / meinv6.jpg"> <a href = "#"> beauté </a> <span> à la mode, brillante, fraîche </span> </div> </li> <li> <div> <img src = "images / chongwu1.jpg"> <a href = "#"> PETS </a> <pank> 666 yuan pour <div> <img src = "images / chongwu2.jpeg"> <a href = "#"> animaux </a> <span> 666 yuan par </span> </div> <v> <img src = "images / chongwu3.jpg"> <a href = "#"> péts </a> <pank> 666 yuan par <div> <img src = "images / chongwu4.jpg"> <a href = "#"> animaux </a> <span> 666 yuan par </span> </div> <v> <img src = "images / chongwu5.jpg"> <a href = "#"> gets </a> <pank> 666 pièces par </pandé> </p> src = "images / chongwu6.jpg"> <a href = "#"> animaux de compagnie </a> <span> 666 pièces par </span> </div> </li> <li> <v> <img src = "images / yingshi1.jpg"> <a href = "#"> Harry Potter Series </a> <div> <img src = "images / yingshi2.jpg"> <a href = "#"> Classics dans les classiques </span> </div> <div> <img src = "images / yingshi2.jpg"> <a href = "#"> Trois idiots font un troupe src = "images / yingshi3.jpg"> <a href = "#"> Transformers Series </a> <span> excitant et excitant </span> </div> <div> <img src = "images / yingshi4.jpg"> <a href = "#"> shenngyu chihiro </a> <pande> <div> <img src = "images / yingshi5.jpeg"> <a href = "#"> tongchi </a> <span> mon chinchilla </span> </div> <div> <img src = "images / yingshi6.jpg"> <a href = "#"> Forrest Gump </a> Gump </a> </div> </li> <li> <div> <img src = "images / lol1.jpg"> <a href = "#"> glace sagittarius </a> <span> la femme </span> </div> <div> <img src = "images / lol2.jpg"> <a href = "#"> fille de l'obscurité </a> <div> <img src = "images / lol3.jpg"> <a href = "#"> explorateur </a> <span> Je suis le plus beau du jeu </span> </div> <v> <img src = "images / lol4.jpg"> <a href = "#"> staff </a> <span> torno </a> <pankish> All-Rounder </a> </div> <div> <img src = "Images / lol5.jpg"> <a href = "#"> Million turc </a> <Span> Morts millions de millions de fois par jour. . </span> </ div> <v> <img src = "images / lol6.jpg"> <a href = "#"> wewolves </a> <span> Ne l'agrandissez pas pour moi </span> </div> </li> <li> à développer. . . </li> </ul> </div> <cript> var title = document.getElementById ('title'); var content = document.getElementById ('Content'); var spans = title.getElementsByTagName ('span'); var lis = contenu.getElementsByTagName ('li'); for (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>La clé de ce code est les deux dernières pour les traversées et ce pointeur. Le premier pour la traversée consiste à ajouter un événement de clic pour chaque bouton SPAN, tandis que la seconde pour la traversée consiste à déterminer quel bouton est actuellement cliqué. La partie de contenu correspondante est facile à contrôler l'apparence et cachée;
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.