如下所示：
<！doctype html> <html lang =“ en”> <head> <head> <meta charset =“ utf-8”> <title> tab </title> </title> <style> <style> *{margin：0;填充：0;列表风格：无;} .box {width：1000px;溢出：隐藏；保证金：100px auto 0px; } #title {line-height：40px;背景色：RGB（247,247,247）;字体大小：16px;字体重量：大胆；颜色：RGB（102,102,102）;溢出：隐藏； } #title跨度{float：left;宽度：166px;文字平衡：中心； } #title跨度：悬停{ /*颜色：黑色;* / cursor：指针; } #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：左;*/ display：inline-block;保证金顶：10px; } #content li a：hover {颜色：＃b70606; } #content li div跨度{font-size：16px;线高：16px; /*float：左;*/ display：block;颜色：RGB（102,102,102）;保证金顶：10px; } #content img {float：left;宽度：155px;身高：250px; } #title .Select {background-color：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> <span> </span> </span> <span> <span> <Span> <Span> <span> <span> </span> </span> </span> </pas> </ps> </ps> </p> </p> <ul id> <ul> <ul> <img <img <img src =“ images/shuaige1.jpg”> <a href =“＃”> </a> <span> <span> </span> </span> </div> </div> <img src =“ images/shuaig.2.jpg”> src =“ images/shuaige3.jpg”> <a href =“＃”> 汤姆・克鲁斯 </a> <span> <span> </span> </span> </div> </div> <img src =“ images/shuaige4.jpg”> <a href = a href =“ src =“ images/shuaige5.jpg”> <a href =“＃”>卷福</a> <span> <span> </span> </span> </div> <img src =“ images/shuaige6.jpg”> <a href = a href =“ src =“ images/meinv1.jpg”> <a href =“＃”>美女</a> <span> <span> </span> </span> </div> <img src =“ images/meinv2.jpg”> <a href = a href =“ src =“ images/meinv3.jpg”> <a href =“>”>美女</a> <span> <span> </span> </span> </div> </div> <img src =“ images/meinv4.jpg”> src =“ images/meinv5.jpg”> <a href =“>”> </a> <span> <span> </span> </span> </div> </div> <img src =“ images/meinv6.jpg”> <a href <a href = a href =“ src =“ images/chongwu1.jpg”> <a href =“＃”>宠物</a> <span> <span> 666块</span> </span> </div> </div> <img src =“ images/chongwu2.jpeg”> src =“ images/chongwu3.jpg”> <a href =“＃”>宠物</a> <span> <span> 666块</span> </span> </div> </div> <img src =“ images/chongwu4.jpg”> src =“ images/chongwu5.jpg”> <a href =“＃”>宠物</a> <span> <span> 666块</span> </span> </div> </div> <img src =“ images/chongwu6.jpg”> <div> <img src =“图像/yingshi1.jpg”> <a href =“＃”>“>”> </a> <span> <span> </span> </span> </div> </div> <img src = <img src =“ images/yingshi2.jpg”> src =“ images/yingshi3.jpg”> <a href =“＃”>变形金刚系列</a> <span> <span> </span> </span> </div> </div> <img src =“ images/yingshi4.jpg”> <a href = a href =“ src =“ images/yingshi5.jpeg”> <a href =“＃”> </a> <span> <span> </span> </span> </div> <img src =“ images/yingshi6.jpg”> 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> </span> </div> <div> <img src =“ images/lol 4.jpg”> <a href =“ href =”＃“>”> </a> <span> <span> </span> </span> </div> </div> </div> <div> href =“＃”> </a> <span> </span> </span> </div> <div> <img src =“ images/lol6.jpg”> <A href =“ href =”＃“>”>“>”> </a> <span> <span> </span> </span> </div> </div> </div> </li> </li> <li> </li> </li> </li> </li> </ul> </ul> </divition> var content = document.getElementById（'content'）; var跨度= title.getElementsbytagname（'span'）; var lis = content.getElementsbytagname（'li'）; for（var i = 0; i <spans.length; i ++）{pans [i] .index = i;跨度[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>这段代码的关键处在最后的两个对于this指针，第一个，第一个span按钮添加点击事件，而第二个，而第二个，相应的内容部分就很好控制出现和隐藏了。，相应的内容部分就很好控制出现和隐藏了。
以上这篇js中常用的tab切换效果（推荐）就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。，也希望大家多多支持武林网。