： ：
<! 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-height: 40px ؛ خلفية اللون: RGB (247،247،247) ؛ حجم الخط: 16 بكسل ؛ خط الرصيف: جريئة ؛ اللون: 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 ؛ اللون: أسود. Line-Leight: 14px ؛ /* تعويم: اليسار ؛*/ العرض: كتلة مضمنة ؛ الهامش: 10 بكسل ؛ } #content li a: hover {color: #b70606 ؛ } #content li div span {font-size: 16px ؛ ارتفاع الخط: 16 بكسل ؛ /*تعويم: اليسار ؛*/ العرض: كتلة ؛ اللون: RGB (102،102،102) ؛ الهامش: 10 بكسل ؛ } #content img {float: left ؛ العرض: 155 بكسل ؛ الارتفاع: 250 بكسل ؛ } #title .select {background-color: rgb (10،167،112) ؛ اللون: أبيض. } #content .show {display: block ؛ } </style> </head> <body> <viv> <p id = "title"> <span> 帅哥 </span> <span> 美女 </span> <span> 宠物 </span> <span> 影视 </span> <span> 英雄联盟 </span> <span> 音乐 </p> </p> src = "Images/shuaige1.jpg"> <a href = "#"> 杰森・史坦森 </a> <span> 狂拽炫酷炸天 </span> </viv> <viv> <img src = "images/shuaige2.jpg"> a href = "#" 杰森・史坦森 </a> src = "images/shuaige3.jpg"> <a href = "#"> 汤姆・克鲁斯 </a> <span> </span> </viv> <viv> <img src = "الصور/shuaige4.jpg"> <a href = "#" 汤姆・克鲁斯 </a> <span> 高端大气上档次src = "Images/shuaige5.jpg"> <a href = "#"> 卷福 </a> <span> </span> </viv> <viv> <img src = "Images/shuaige6.jpg"> a href = "#" 卷福 </a> <span> src = "images/meinv1.jpg"> <a href = "#"> 美女 </a> <span> 外猛内柔女汉子 </span> </viv> <viv> <img src = "images/meinv2.jpg"> <a href = "#" src = "images/meinv3.jpg"> <a href = "#"> 美女 </a> <span> 卖萌嘟嘴剪刀手 </span> </viv> <viv> <img src = "images/meinv4.jpg"> <a href = "#" src = "images/meinv5.jpg"> <a href = "#"> 美女 </a> <span> 时尚亮丽小清新 </span> </viv> <viv> <img src = "images/meinv6.jpg"> <a href = "#" src = "Images/chongwu1.jpg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 </span> </viv> <viv> <img src = "images/chongwu2.jpeg"> <a href = "#" 宠物 </a> 每只 span> src = "Images/chongwu3.jpg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 </span> </viv> <viv> <img src = "الصور/chongwu4 src = "images/chongwu5.jpg"> <a href = "#"> 宠物 </a> <span> 每只 666 块 </span> </viv> <viv> <img src = "الصور/chongwu6.jpg"> <a href = "#" 宠物 </a> <viv> <img src = "images/yingshi1.jpg"> <a href = "#"> 哈利波特系列 </a> <span> 经典中的经典 </span> </viv> <viv> <img src = "images/yingshi2.jpg"> <a href = "#" src = "images/yingshi3.jpg"> <a href = "#"> 变形金刚系列 </a> <span> </span> </viv> <viv> <img src = "images/yingshi4 src = "images/yingshi5.jpeg"> <a href = "#"> 龙猫 </a> <span> 我的龙猫啊啊啊 </span> </viv> <viv> <img src = "images/yingshi6.jpg"> <a href = "#" src = "Images/lol1.jpg"> <a href = "#"> 寒冰射手 </a> <span> 蛮王他媳妇 </span> </viv> <viv> <img src = "images/lol2.jpg"> <a href = "#" 黑暗之女 </a> <span> 小萝莉一枚 </span> href = "#"> 探险家 </a> <span> 游戏中我最帅 </span> </viv> <viv> <img src = "Images/lol4.jpg"> <A Href = "#" HREF = "#"> 提莫提百万 </a> <span> 每天死亡百万次。。 </span> </viv> <viv> <img src = "Images/lol6.jpg"> <a href = "#"> 狼人 </a> <span> 别给我放大 </santed> </span> </viv> </li> </li> var content = document.getElementById ('content') ؛ var يمتد = title.getElementsByTagName ('span') ؛ var lis = content.getElementSbyTagname ('li') ؛ لـ (var i = 0 ؛ i <Spans.length ؛ i ++) {يمتد [i] .index = i ؛ يمتد [i] .onclick = function () {for (var j = 0 ؛ j <Spans.length ؛ j ++) {يمتد [j] .className = '' ؛ lis [j] .className = '' ؛ } this.className = 'select' ؛ lis [this.index] .className = 'show' ؛ }} </script> </body> </html>这段代码的关键处在最后的两个 ل 遍历和 هذا 指针 ， 第一个 for 遍历是为每一个 span 按钮添加点击事件 ， 而第二个 for 遍历是确定当前点击的是哪个按钮 ， 相应的内容部分就很好控制出现和隐藏了。
以上这篇 JS 中常用的 tab 切换效果 (推荐) 就是小编分享给大家的全部内容了 ， 希望能给大家一个参考 ， 也希望大家多多支持武林网。