很棒的js Tab選項卡切換效果

更新時間：2016年08月30日 09:02:09 作者：騎豬敲代碼

這篇文章主要介紹了很棒的js Tab選項卡切換效果，簡單的選項卡切換特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了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>英雄聯(lián)盟</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>
     待開發(fā)。。。
    </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遍歷是確定當前點擊的是哪個按鈕，相應的內容部分就很好控制出現(xiàn)和隱藏了；

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: