很棒的js Tab选项卡切换效果_javascript技巧

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