如下所示：
<！ 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> </span> </span> </div> </div> <img src =“ images/images/lol2.jpg”> <A href = a href =“>”> </a> </a> <span> <span> <span> <span> <spas> <spas> </lol lol> </lol> </lol> </div> </div> <img <img <imj 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切換效果（推薦）就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。 ，也希望大家多多支持武林網。