如下所示 ：
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> tab </iteme> <tyle> *{margin: 0; Padding: 0; List-style: none;} .box {width: 1000px; meluap: tersembunyi; margin: 100px auto 0px; } #title {line-height: 40px; latar belakang-warna: RGB (247.247.247); font-size: 16px; font-weight: tebal; Warna: RGB (102.102.102); meluap: tersembunyi; } #title span {float: left; Lebar: 166px; Teks-Align: tengah; } #title span: hover { /*color: black;* / kursor: pointer; } #content {margin-top: 20px; } #content li {width: 1050px; meluap: tersembunyi; Tampilan: Tidak Ada; latar belakang-warna: RGB (247.247.247); } #content li div {width: 156px; margin-kanan: 14px; float: kiri; Teks-Align: tengah; } #content li div a {font-size: 14px; Warna: Hitam; Line-Height: 14px; /* float: kiri;*/ display: inline-block; margin-top: 10px; } #content li A: hover {color: #b70606; } #content li div span {font-size: 16px; Line-Height: 16px; /*float: kiri;*/ display: blok; Warna: RGB (102.102.102); margin-top: 10px; } #content img {float: left; Lebar: 155px; Tinggi: 250px; } #title .select {background-color: rgb (10.167.112); Warna: Putih; } #content .show {display: block; } </tyle> </head> <body> <dv> <p id = "title"> <span> 帅哥 </span> <span> 美女 </span> <span> 宠物 </span> <span> 影视 </span> <span> 英雄联盟 </span> <span> 音乐 </span> </p> <ul id = "content"> <pan> <span> 音乐 </span> </p> <ul id = "content"> <span> 音乐 </span> </p> <ul = "content"> <span> 音乐 </span> </p> <ul = "content"> <span> 音乐 </span> </p> <ul = "content"> <span> src="images/shuaige1.jpg"><a href="#">杰森・史坦森</a><span>狂拽炫酷炸天</span></div> <div><img src="images/shuaige2.jpg"><a href="#">杰森・史坦森</a><span>狂拽炫酷炸天</span></div> <div><img 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="images/shuaige5.jpg"><a href="#">卷福</a><span>低调奢华有内涵</span></div> <div><img src="images/shuaige6.jpg"><a href="#">卷福</a><span>低调奢华有内涵</span></div> </li> <li> <div><img src = "gambar/meinv1.jpg"> <a href = "#"> 美女 </a> <span> 外猛内柔女汉子 </span> </div> <ver> <img src = "gambar/meinv2.jpg"> <a href = "#"> </a> <pan> 外猛内柔女汉子 </span> </Div> </div> </a> src = "gambar/meinv3.jpg"> <a href = "#"> 美女 </a> <span> 卖萌嘟嘴剪刀手 </span> </div> <div> <img src = "gambar/meinv4.jpg"> <a href = "#"> </a> <span> 卖萌嘟嘴剪刀手 </span> </Divg> src = "gambar/meinv5.jpg"> <a href = "#"> 美女 </a> <span> 时尚亮丽小清新 </span> </div> <ver> <img src = "gambar/meinv6.jpg"> <a href = "#"> </a> <pan> </span> </div> </Li> </a> </a> <pan> </span> </div> </Li> </a> </a> <pan> 时尚亮丽小清新 </span> </Div> </Li> </a> </a> <pan> </span> </Div> src = "gambar/chongwu1.jpg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 </span> </div> <ver> <mmg src = "gambar/chongwu2.jpeg"> </</</</</</</</</</</</</</</<块 <块 </每只 </每只 </每只 </每只 </每只 </每只 </每只 </每只 </a src = "gambar/chongwu3.jpg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 </span> </div> <ver> <mmg src = "gambar/chongwu4.jpg"> </</</</</</</</</</</</</</"#"> </sang sana </66 src = "gambar/chongwu5.jpg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 </span> </div> <ver> <mmg src = "gambar/chongwu6.jpg"> <a href = "#"> 宠物 </a> </li> 每只 </66 </li </66> </li </li </li </66> </li </li </li </li <块 </li </li </li </li </li </li </li </li </li </li> <dv> <img src = "gambar/yingshi1.jpg"> <a href = "#"> 哈利波特系列 </a> <span> 经典中的经典 </span> </div> <ver> <img src = "gambar/yingshi2.jpg"> <a href = "#"> </a> <gan> 看到泪崩 </div </div </div = "#"> </a> <g Span> 看到泪崩 </div </div = "#"> </a> <g Span> 看到泪崩 </href = "#"> </a> <g Span> src = "gambar/yingshi3.jpg"> <a href = "#"> 变形金刚系列 </a> <span> 过瘾过瘾过瘾 </span> </div> <div> <img src = "gambar/yingshi4.jpg"> <a href = "#"> </a> <pan> </span> </Div = "#" src = "gambar/yingshi5.jpeg"> <a href = "#"> 龙猫 </a> <span> 我的龙猫啊啊啊 </span> </div> <div> <img src = "gambar/yingshi6.jpg"> <a href = "#"> </a> <pan> </span> </div = "#" src = "gambar/lol1.jpg"> <a href = "#"> 寒冰射手 </a> <span> 蛮王他媳妇 </span> </div> <dv> <img src = "gambar/lol2.jpg"> <a href = "#"> </a> <san span> </span> </div> <g> <pan> </a> </a> <span> 小萝莉一枚 </span> </Div> href = "#"> 探险家 </a> <span> 游戏中我最帅 </span> </div> <div> <img src = "gambar/lol4.jpg"> <a href = "#"> 人马 </a> <span> 上单大野全能 </span> </div> <v> <img src = "gambar/lol5.jpg" href = "#"> 提莫提百万 </a> <span> 每天死亡百万次。。 </span> </div> <verv> <img src = "gambar/lol6.jpg"> <a href = "#"> 狼人 </a> <span> 别给我放大 </span> </div> </li> <li> 待开发。。。 </Li> </Ul '; var content = document.geteLementById ('content'); var spans = title.geteLementsByTagname ('span'); var lis = content.getElementsbyTagname ('li'); untuk (var i = 0; i <spans.length; i ++) {spans [i] .index = i; rentang [i] .onClick = function () {for (var j = 0; j <spans.length; j ++) {spans [j] .className = ''; lis [j] .className = ''; } this.className = 'pilih'; lis [this.index] .className = 'show'; }} </script> </body> </html>这段代码的关键处在最后的两个 untuk 遍历和 ini 指针 ， 第一个 untuk 遍历是为每一个 span 按钮添加点击事件 ， 而第二个 untuk 遍历是确定当前点击的是哪个按钮 ， 相应的内容部分就很好控制出现和隐藏了。
以上这篇 js 中常用的 tab 切换效果 (推荐) 就是小编分享给大家的全部内容了 ， 希望能给大家一个参考 ， 也希望大家多多支持武林网。