如下所示：
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> แท็บ </title> <style> *{margin: 0; Padding: 0; รายการสไตล์: ไม่มี;} .box {width: 1000px; ล้น: ซ่อน; มาร์จิ้น: 100px auto 0px; } #title {line-height: 40px; พื้นหลังสี: RGB (247,247,247); ขนาดตัวอักษร: 16px; Font-Weight: ตัวหนา; สี: RGB (102,102,102); ล้น: ซ่อน; } #title Span {float: ซ้าย; ความกว้าง: 166px; TEXT-ALIGN: CENTER; } #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; ลอย: ซ้าย; TEXT-ALIGN: CENTER; } #content li div a {font-size: 14px; สี: สีดำ; ความสูงของสาย: 14px; /* ลอย: ซ้าย;*/ แสดง: inline-block; ระยะขอบด้านบน: 10px; } #content li a: hover {color: #b70606; } #Content Li Div Span {FONT-SIZE: 16PX; ความสูงของสาย: 16px; /*ลอย: ซ้าย;*/ แสดง: บล็อก; สี: RGB (102,102,102); ระยะขอบด้านบน: 10px; } #content img {float: ซ้าย; ความกว้าง: 155px; ความสูง: 250px; } #title .Select {พื้นหลังสี: RGB (10,167,112); สี: สีขาว; } #Content. Show {display: block; } </style> </head> <body> <div> <p id = "title"> <span> 帅哥 </span> <span> 美女 </span> <span> 宠物 </span> <span> 影视 </span> <span> 英雄联盟 </span> <span> 音乐 </span> src = "images/shuaige1.jpg"> <a href = "#"> 杰森・史坦森 </a> <span> 狂拽炫酷炸天 </span> </div> <div> <img src = "images/shuaige2.jpg"> <a href = "#"> 杰森・史坦森 </a> src = "images/shuaige3.jpg"> <a href = "#"> 汤姆・克鲁斯 </a> <span> 高端大气上档次 </span> </div> <div> <img src = "images/shuaige4.jpg"> <a href = "#"> 汤姆・克鲁斯 </a> src = "images/shuaige5.jpg"> <a href = "#"> 卷福 </a> <span> 低调奢华有内涵 </span> </div> <div> <img src = "images/shuaige6.jpg"> <a href = "#"> 卷福 </a> src = "images/meinv1.jpg"> <a href = "#"> 美女 </a> <span> 外猛内柔女汉子 </span> </div> <div> <img src = "images/meinv2.jpg"> <a href = "#"> 美女 </a> src = "images/meinv3.jpg"> <a href = "#"> 美女 </a> <span> 卖萌嘟嘴剪刀手 </span> </div> <div> <img src = "images/meinv4.jpg"> <a href = "#"> 美女 </a> src = "images/meinv5.jpg"> <a href = "#"> 美女 </a> <span> 时尚亮丽小清新 </span> </div> <div> <img src = "images/meinv6.jpg"> <a href = "#"> 美女 </a> src = "images/chongwu1.jpg"> <a href = "#"> 宠物 </a> <pan> 每只 666 块 </span> </div> <div> <img src = "ภาพ/chongwu2.jpeg"> <a href = "#"> 宠物 </a> src = "images/chongwu3.jpg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 </span> </div> <iMg Src = "ภาพ/chongwu4.jpg"> <a href = "#"> 宠物 </a> src = "images/chongwu5.jpg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 </span> </div> <div> <img src = "ภาพ/chongwu6.jpg"> <a href = "#"> 宠物 </a> <div> <img src = "images/yingshi1.jpg"> <a href = "#"> 哈利波特系列 </a> <span> 经典中的经典 </span> </div> <div> <img src = "images/yingshi2.jpg"> <a href = "#"> 三傻大闹宝莱坞 </a> src = "images/yingshi3.jpg"> <a href = "#"> 变形金刚系列 </a> <span> 过瘾过瘾过瘾 </span> </div> <div> <img src = "images/yingshi4.jpg"> <a href = "#"> 千与千寻 </a> src = "images/yingshi5.jpeg"> <a href = "#"> 龙猫 </a> <span> 我的龙猫啊啊啊 </span> </div> <div> <img src = "images/yingshi6.jpg"> <a href = "#"> 阿甘正传 </a> src = "images/lol1.jpg"> <a href = "#"> 寒冰射手 </a> <pan> 蛮王他媳妇 </span> </div> <div> <img src = "ภาพ/lol2.jpg"> <a href = "#"> 黑暗之女 </a> href = "#"> 探险家 </a> <span> 游戏中我最帅 </span> </div> <div> <img src = "รูปภาพ/lol4.jpg"> <a href = "#"> 人马 </a> <pan> 上单大野全能 </span> </div> href = "#"> 提莫提百万 </a> <span> 每天死亡百万次。。 </span> </div> <div> <img src = "images/lol6.jpg"> <a href = "#"> 狼人 </a> <pan> 别给我放大 </span> var content = document.getElementById ('เนื้อหา'); var Spans = title.getElementsByTagname ('span'); var lis = content.getElementsByTagname ('li'); สำหรับ (var i = 0; i <spans.length; i ++) {Spans [i] .index = i; Spans [i] .onclick = function () {สำหรับ (var j = 0; j <spans.length; j ++) {Spans [j] .classname = ''; lis [j] .className = ''; } this.className = 'เลือก'; lis [this.index] .className = 'show'; }} </script> </body> </html>这段代码的关键处在最后的两个สำหรับ遍历和指针， 第一个第一个สำหรับ遍历是为每一个 Span 按钮添加点击事件， 而第二个สำหรับ遍历是确定当前点击的是哪个按钮， 相应的内容部分就很好控制出现和隐藏了。相应的内容部分就很好控制出现和隐藏了。
以上这篇 js 中常用的แท็บ切换效果 (推荐) 就是小编分享给大家的全部内容了， 希望能给大家一个参考， 也希望大家多多支持武林网。也希望大家多多支持武林网。