很棒的js Tab选项卡切换效果
本文实例为大家分享了jsTab选项卡切换效果,供大家参考,具体内容如下
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>tab</title> <style> *{margin:0;padding:0;list-style:none;} .box{ width:1000px; overflow:hidden; margin:100pxauto0px; } #title{ line-height:40px; background-color:rgb(247,247,247); font-size:16px; font-weight:bold; color:rgb(102,102,102); overflow:hidden; } #titlespan{ float:left; width:166px; text-align:center; } #titlespan:hover{ /*color:black;*/ cursor:pointer; } #content{ margin-top:20px; } #contentli{ width:1050px; overflow:hidden; display:none; background-color:rgb(247,247,247); } #contentlidiv{ width:156px; margin-right:14px; float:left; text-align:center; } #contentlidiva{ font-size:14px; color:black; line-height:14px; /*float:left;*/ display:inline-block; margin-top:10px; } #contentlia:hover{ color:#B70606; } #contentlidivspan{ font-size:16px; line-height:16px; /*float:left;*/ display:block; color:rgb(102,102,102); margin-top:10px; } #contentimg{ float:left; width:155px; height:250px; } #title.select{ background-color:rgb(10,167,112); color:white; } #content.show{ display:block; } </style> </head> <body> <divclass="box"> <pid="title"> <spanclass="select">帅哥</span> <span>美女</span> <span>宠物</span> <span>影视</span> <span>英雄联盟</span> <span>音乐</span> </p> <ulid="content"> <liclass="show"> <div><imgsrc="images/shuaige1.jpg"alt="帅哥1"><ahref="#">杰森·史坦森</a><span>狂拽炫酷屌炸天</span></div> <div><imgsrc="images/shuaige2.jpg"alt="帅哥2"><ahref="#">杰森·史坦森</a><span>狂拽炫酷屌炸天</span></div> <div><imgsrc="images/shuaige3.jpg"alt="帅哥3"><ahref="#">汤姆·克鲁斯</a><span>高端大气上档次</span></div> <div><imgsrc="images/shuaige4.jpg"alt="帅哥4"><ahref="#">汤姆·克鲁斯</a><span>高端大气上档次</span></div> <div><imgsrc="images/shuaige5.jpg"alt="帅哥5"><ahref="#">卷福</a><span>低调奢华有内涵</span></div> <div><imgsrc="images/shuaige6.jpg"alt="帅哥6"><ahref="#">卷福</a><span>低调奢华有内涵</span></div> </li> <li> <div><imgsrc="images/meinv1.jpg"alt="美女1"><ahref="#">美女</a><span>外猛内柔女汉子</span></div> <div><imgsrc="images/meinv2.jpg"alt="美女2"><ahref="#">美女</a><span>外猛内柔女汉子</span></div> <div><imgsrc="images/meinv3.jpg"alt="美女3"><ahref="#">美女</a><span>卖萌嘟嘴剪刀手</span></div> <div><imgsrc="images/meinv4.jpg"alt="美女4"><ahref="#">美女</a><span>卖萌嘟嘴剪刀手</span></div> <div><imgsrc="images/meinv5.jpg"alt="美女5"><ahref="#">美女</a><span>时尚亮丽小清新</span></div> <div><imgsrc="images/meinv6.jpg"alt="美女6"><ahref="#">美女</a><span>时尚亮丽小清新</span></div> </li> <li> <div><imgsrc="images/chongwu1.jpg"alt="宠物1"><ahref="#">宠物</a><span>每只666块</span></div> <div><imgsrc="images/chongwu2.jpeg"alt="宠物2"><ahref="#">宠物</a><span>每只666块</span></div> <div><imgsrc="images/chongwu3.jpg"alt="宠物3"><ahref="#">宠物</a><span>每只666块</span></div> <div><imgsrc="images/chongwu4.jpg"alt="宠物4"><ahref="#">宠物</a><span>每只666块</span></div> <div><imgsrc="images/chongwu5.jpg"alt="宠物5"><ahref="#">宠物</a><span>每只666块</span></div> <div><imgsrc="images/chongwu6.jpg"alt="宠物6"><ahref="#">宠物</a><span>每只666块</span></div> </li> <li> <div><imgsrc="images/yingshi1.jpg"alt="影视1"><ahref="#">哈利波特系列</a><span>经典中的经典</span></div> <div><imgsrc="images/yingshi2.jpg"alt="影视2"><ahref="#">三傻大闹宝莱坞</a><span>看到泪崩</span></div> <div><imgsrc="images/yingshi3.jpg"alt="影视3"><ahref="#">变形金刚系列</a><span>过瘾过瘾过瘾</span></div> <div><imgsrc="images/yingshi4.jpg"alt="影视4"><ahref="#">千与千寻</a><span>梦中的小萝莉那么清新</span></div> <div><imgsrc="images/yingshi5.jpeg"alt="影视5"><ahref="#">龙猫</a><span>我的龙猫啊啊啊</span></div> <div><imgsrc="images/yingshi6.jpg"alt="影视6"><ahref="#">阿甘正传</a><span>阿甘还是那个阿甘</span></div> </li> <li> <div><imgsrc="images/lol1.jpg"alt="lol1"><ahref="#">寒冰射手</a><span>蛮王他媳妇</span></div> <div><imgsrc="images/lol2.jpg"alt="lol2"><ahref="#">黑暗之女</a><span>小萝莉一枚</span></div> <div><imgsrc="images/lol3.jpg"alt="lol3"><ahref="#">探险家</a><span>游戏中我最帅</span></div> <div><imgsrc="images/lol4.jpg"alt="lol4"><ahref="#">人马</a><span>上单大野全能</span></div> <div><imgsrc="images/lol5.jpg"alt="lol5"><ahref="#">提莫提百万</a><span>每天死亡百万次。。</span></div> <div><imgsrc="images/lol6.jpg"alt="lol6"><ahref="#">狼人</a><span>别给我放大</span></div> </li> <li> 待开发。。。 </li> </ul> </div> <script> vartitle=document.getElementById('title'); varcontent=document.getElementById('content'); varspans=title.getElementsByTagName('span'); varlis=content.getElementsByTagName('li'); for(vari=0;i<spans.length;i++){ spans[i].index=i; spans[i].onclick=function(){ for(varj=0;j<spans.length;j++){ spans[j].className=''; lis[j].className=''; } this.className='select'; lis[this.index].className='show'; } } </script> </body> </html>
这段代码的关键处在最后的两个for遍历和this指针,第一个for遍历是为每一个span按钮添加点击事件,而第二个for遍历是确定当前点击的是哪个按钮,相应的内容部分就很好控制出现和隐藏了;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。