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