js实现tab选项卡切换

2018-06-24 01:29:34来源：未知阅读 ()

　　今天学习了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;}