如下所示 ：
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> вкладка </title> <style> *{margin: 0; Заполнение: 0; Список стиля: none;} .box {width: 1000px; переполнение: скрыто; Полевая: 100px Auto 0px; } #title {line-hight: 40px; фоновый цвет: RGB (247 247 247); размер шрифта: 16px; шрифт-вес: жирный шрифт; Цвет: RGB (102,102,102); переполнение: скрыто; } #title span {float: left; Ширина: 166px; Текст-альбом: Центр; } #title span: hover { /*color: black;* / cursor: pointer; } #content {margin-top: 20px; } #content li {width: 1050px; переполнение: скрыто; дисплей: нет; фоновый цвет: RGB (247 247 247); } #content li div {width: 156px; Право маржи: 14px; Плавание: осталось; Текст-альбом: Центр; } #content li div a {font-size: 14px; Цвет: черный; высота линии: 14px; /* float: слева;*/ дисплей: inline-block; маржинальная версия: 10px; } #content li a: Hover {color: #b70606; } #content li div span {font-size: 16px; высота линии: 16px; /*float: left;*/ display: block; Цвет: RGB (102,102,102); маржинальная версия: 10px; } #content img {float: left; Ширина: 155px; Высота: 250px; } #title. Select {фоновый цвет: rgb (10,167,112); Цвет: белый; } #content .show {display: block; } </style> </head> <body> <div> <p id = "title"> <pan> 帅哥 </span> <pan> 美女 </span> <pan> 宠物 </span> <pan> 影视 </span> <pan> 英雄联盟 </span> <pan> 音乐 </span> </p> <ul id = " src = "Images/shuaige1.jpg"> <a href = "#"> 杰森・史坦森 </a> <pan> 狂拽炫酷炸天 </span> </div> <div> <img src = "Images/shuaige2.jpg"> <a href = "#"> 杰森・史坦森 </a> <pran> </span> </div> <mref = "#" src = "Images/shuaige3.jpg"> <a href = "#"> 汤姆・克鲁斯 </a> <pan> 高端大气上档次 </span> </div> <div> <img src = "Images/shuaige4.jpg"> <a href = "#"> 汤姆・克鲁斯 </a> <pan> </span> </div> src = "Images/shuaige5.jpg"> <a href = "#"> 卷福 </a> <pan> 低调奢华有内涵 </span> </div> <div> <img src = "Image/shuaige6.jpg"> <a href = "#"> 卷福 </a> <pran> 低调奢华有内涵 span> </div> <i -img> <i -li> src = "Images/meinv1.jpg"> <a href = "#"> 美女 </a> <pan> 外猛内柔女汉子 </span> </div> <div> <img src = "Images/meinv2.jpg"> <a href = "#"> 美女 </a> <pan> 外猛内柔女汉子 </span> </div> src = "Images/meinv3.jpg"> <a href = "#"> 美女 </a> <pan> 卖萌嘟嘴剪刀手 </span> </div> <viv> <img src = "Images/meinv4.jpg"> <a href = "#"> 美女 </a> <pan> </span> </div> src = "Images/meinv5.jpg"> <a href = "#"> 美女 </a> <pan> 时尚亮丽小清新 </span> </div> <div> <img src = "Images/meinv6.jpg"> <a href = "#"> 美女 </a> <pan> </span> </div> </li> <ip> <ip> src = "Images/chongwu1.jpg"> <a href = "#"> 宠物 </a> <pan> 每只 666 块 </span> </div> <div> <img src = "Images/Chongwu2.jpeg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 span> </diver> </span> diver> </impeg> </span> <imper> </span> <imper> </span> <imper> 块. src = "Images/chongwu3.jpg"> <a href = "#"> 宠物 </a> <pan> 每只 666 块 </span> </div> <div> <img src = "Images/Chongwu4.jpg"> <a href = "#"> 宠物 </a> <pan> 每只 666 块 span> </dive> </diver> </diver> </dive> </dive> <ist> <ist> <ist> <ist> <imber> <ist> <ist> <ist> <imge> <imge> <imge> <ist> <imber> <ist> <ist> <imge> <imge> <ive> <imgg. src = "Images/chongwu5.jpg"> <a href = "#"> 宠物 </a> <pan> 每只 666 块 </span> </div> <div> <img src = "Images/chongwu6.jpg"> <a href = "#"> 宠物 </a> <pan> 每只 666 块 span> <//li Div> li> <div> <img src = "Images/yingshi1.jpg"> <a href = "#"> 哈利波特系列 </a> <pan> 经典中的经典 </span> </div> <div> <img src = "Images/yingshi2.jpg"> <a href = "#"> 三傻大闹宝莱坞 </a> <pran> 看到泪崩 span> <div> <siv> </div> <Div> <siv> </div> <Div> <siv> </div> </dive> <siv> src = "Images/yingshi3.jpg"> <a href = "#"> 变形金刚系列 </a> <pan> 过瘾过瘾过瘾 </span> </div> <div> <img src = "Images/yingshi4.jpg"> <a href = "#"> 千与千寻 </a> <pan> </span> </div> <div> <imgg> src = "Images/yingshi5.jpeg"> <a href = "#"> 龙猫 </a> <pan> 我的龙猫啊啊啊 </span> </div> <div> <img src = "Images/yingshi6.jpg"> <a href = "#"> 阿甘正传 </a> <pan> 阿甘还是那个阿甘 span> </div> </lig> <i -ig> <iv> src = "Images/lol1.jpg"> <a href = "#"> 寒冰射手 </a> <pan> 蛮王他媳妇 </span> </div> <div> <img src = "Image/lol2.jpg"> <a href = "#"> 黑暗之女 </a> <pan> 小萝莉一枚 span> </div> <div> <img src = " href = "#"> 探险家 </a> <pan> 游戏中我最帅 </span> </div> <viv> <img src = "Images/lol4.jpg"> <a href = "#"> 人马 </a> <pan> 上单大野全能 </span> </div> <div> <img src = " href = "#"> 提莫提百万 </a> <pan> 每天死亡百万次。。 </span> </div> <div> <img src = "Images/lol6.jpg"> <a href = "#"> 狼人 </a> <pan> 别给我放大 </span> </div> </li> <li> 待开发。。。 待开发。。。 待开发。。。 water. var content = document.getElementbyId ('content'); var spans = title.getElementsbytagname ('span'); var lis = content.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>这段代码的关键处在最后的两个 для этого 指针 ， 第一个 для 遍历是为每一个 -span 按钮添加点击事件 ， 而第二个 для 遍历是确定当前点击的是哪个按钮 ， 相应的内容部分就很好控制出现和隐藏了。
以上这篇 JS 中常用的 Tab 切换效果 (推荐) 就是小编分享给大家的全部内容了 ， 希望能给大家一个参考 ， 也希望大家多多支持武林网。