js實現tab選項卡切換

　　今天學習了tab選項卡切換。

• js代碼：

   1 <script>
   2     var lis = document.querySelectorAll("#tab-title li");
   3     var i = 0, len = lis.length;
   4     for (; i < len; i++){
   5         var li = lis[i];
   6         //記住li的索引
   7         li.setAttribute('index',i);
   8         li.onmouseover = function (){
   9             //清空高亮
  10             for(i = 0;i < len; i++){
  11                 lis[i].className = '';
  12             }
  13             //當前高亮
  14             this.className = 'current';
  15             //當滑鼠經過li時，獲取li的索引
  16             var index = parseInt(this.getAttribute('index'));
  17             var divs = document.querySelectorAll('#tab-con div');
  18             var divLen = divs.length;
  19             for(i = 0; i < divLen; i++){
  20                 var div = divs[i];
  21                 div.className = '';
  22             }
  23             divs[index].className = 'current';
  24         }
  25     }
  26 </script>

• 附上html代碼：

   1 <div class="tab-main">
   2     <div class="tab-title" >
   3         <ul id="tab-title">
   4             <li class="current">知足</li>
   5             <li>倔強</li>
   6             <li>鹹魚</li>
   7             <li>笑忘歌</li>
   8         </ul>
   9     </div>
  10     <div class="tab-con" id="tab-con"> 
  11         <div class="current">
  12             <p>怎麼去擁有一到彩虹</p>
  13             <p>怎麼去擁抱一夏天的風</p>
  14             <p>天上的星星笑地上的人</p>
  15             <p>總是不能懂不能覺得足夠</p>
  16         </div>
  17         <div>
  18             <p>我和我最後的倔強握緊雙手絕對不放</p>
  19             <p>下一站是不是天堂就算失望不能絕望</p>
  20             <p>我和我驕傲的倔強我在風中大聲的唱</p>
  21             <p>這一次為自己瘋狂就這一次我和我的倔強</p>
  22         </div>
  23         <div>
  24             <p>我 如果有夢 有沒有錯 </p>
  25             <p>錯過才會更加明白 明白堅持是什麼？</p>
  26             <p>我 如果有夢 夢要夠瘋 </p>
  27             <p>夠瘋才能變成英雄 總會有一篇 我的傳說 </p>
  28         </div>
  29         <div>
  30             <p>傷心的都忘記了</p>
  31             <p>只記得這首笑忘歌</p>
  32             <p>那一年天空很高風很清澈</p>
  33             <p>從頭到腳趾都快樂</p>
  34         </div>
  35     </div>
  36 </div>

• 附上css樣式：

   1 *{margin: 0; padding: 0; list-style-type: none; cursor: pointer;font-size: 14px; }
   2 .tab-main{ margin: 100px; width: 400px; height:300px;border: 1px solid #ddd;color: #4d4d4d;}
   3 .tab-title{ font-size: 14px;}
   4 .tab-title ul{clear: both;}
   5 .tab-title li{width: 100px; float: left;background: #ddd; text-align: center; height: 30px; line-height: 30px; display: inline;;}
   6 .tab-title li.current{background: #4a93d7;color:#fff; }
   7 .tab-title li:hover{background: #4a93d7;color:#fff; }
   8 .tab-con{ margin-top: 50px; background: #fff; line-height: 24px; text-align: center;}
   9 .tab-con div{display: none;}
  10 .tab-con div.current{display: block;}