：
<! 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> 帅哥 </span> <span> 美女 </span> <span> 宠物 </span> <span> 影视 </span> <span> 英雄联盟 </span> <span> 音乐 </span> </p> <ul id = "Contenu"> <li> <div> <mg> src = "images / shuaige1.jpg"> <a href = "#"> 杰森・史坦森 </a> <span> 狂拽炫酷炸天 </span> </div> <div> <img src = "images / shuaige2.jpg"> <a href = "#"> 杰森・史坦森 </a> <pande> 狂拽炫酷炸天 </pan> </v> </v> <v> <img src = "images / shuaige3.jpg"> <a href = "#"> 汤姆・克鲁斯 </a> <span> 高端大气上档次 </span> </div> <div> <img src = "images / shuaige4.jpg"> <a href = "#"> 汤姆・克鲁斯 </a> <spande> src = "images / shuaige5.jpg"> <a href = "#"> 卷福 </a> <span> 低调奢华有内涵 </span> </div> <div> <img src = "images / shuaige6.jpg"> <a href = "#"> 卷福 </a> <pande> src = "images / meinv1.jpg"> <a href = "#"> 美女 </a> <span> 外猛内柔女汉子 </span> </div> <div> <img src = "images / meinv2.jpg"> <a href = "#"> 美女 </a> <span> 外猛内柔女汉子 </pan> </v> <v> <v> <v> <img src = "images / meinv3.jpg"> <a href = "#"> 美女 </a> <span> 卖萌嘟嘴剪刀手 </span> </div> <div> <img src = "images / meinv4.jpg"> <a href = "#"> 美女 </a> <span> 卖萌嘟嘴剪刀手 </pan> </v> <v> <v> <img src = "images / meinv5.jpg"> <a href = "#"> 美女 </a> <span> 时尚亮丽小清新 </span> </div> <div> <img src = "images / meinv6.jpg"> <a href = "#"> 美女 </a> <span> 时尚亮丽小清新 </pan> </v> </li> </ dip> src = "images / chongwu1.jpg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 </span> </div> <v> <img src = "images / chongwu2.jpeg"> <a href = "#"> 宠物 </a> <pande> 每只 666 块 </ spander> src = "images / chongwu3.jpg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 </span> </div> <v> <img src = "images / chongwu4.jpg"> <a href = "#"> 宠物 </a> <pander> 每只 666 块 </ spander> src = "images / chongwu5.jpg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 </span> </div> <v> <img src = "images / chongwu6.jpg"> <a href = "#"> 宠物 </a> <pan> 每只 666 块 </ spander> <div> <img src = "images / yingshi1.jpg"> <a href = "#"> 哈利波特系列 </a> <span> 经典中的经典 </span> </div> <div> <img src = "images / yingshi2.jpg"> <a href = "#"> 三傻大闹宝莱坞 </a> <pan> 看到泪崩 </pande> src = "images / yingshi3.jpg"> <a href = "#"> 变形金刚系列 </a> <span> 过瘾过瘾过瘾 </span> </div> <v> <img src = "images / yingshi4.jpg"> <a href = "#"> 千与千寻 </a> <span> </pan> </v> <v> <v> src = "images / yingshi5.jpeg"> <a href = "#"> 龙猫 </a> <span> 我的龙猫啊啊啊 </span> </div> <v> <img src = "images / yingshi6.jpg"> <a href = "#"> 阿甘正传 </a> <spandé src = "images / lol1.jpg"> <a href = "#"> 寒冰射手 </a> <span> 蛮王他媳妇 </span> </ div> <div> <img src = "images / lol2.jpg"> <a href = "#"> 黑暗之女 </a> <pan> 小萝莉一枚 </span> </v> <v> <img src = "images / lol3.jf" href = "#"> 探险家 </a> <span> 游戏中我最帅 </span> </div> <div> <img src = "images / lol4.jpg"> <a href = "#"> 人马 </a> <pan> 上单大野全能 </span> </ div> <v> <img src = "images / lol5.jpg"> <a href = "#"> 提莫提百万 </a> <span> 每天死亡百万次。。 </span> </div> <div> <img src = "images / lol6.jpg"> <a href = "#"> 狼人 </a> <span> 别给我放大 </span> </v> </li> <li> 待开发。。。 </li> </ul> </v> </div> </ script> var title = Documinel. 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>这段代码的关键处在最后的两个 pour 遍历和 ce 指针 ， 第一个 pour 遍历是为每一个 Span 按钮添加点击事件 ， 而第二个 pour 遍历是确定当前点击的是哪个按钮 ， 相应的内容部分就很好控制出现和隐藏了。
以上这篇 JS 中常用的 Tab 切换效果 (推荐) 就是小编分享给大家的全部内容了 ， 希望能给大家一个参考 ， 也希望大家多多支持武林网。