如下所示:
<!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切换效果(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。,也希望大家多多支持武林网。