整理用js實現tab標籤頁

首先是css樣式，好比這樣的：

 1 <style>
 2         *{
 3             margin:0;
 4             padding: 0;
 5             list-style: none;
 6             font-size: 12px;
 7         }
 8         .notice{
 9             width: 298px;
10             height: 98px;
11             margin: 10px;
12             border:1px solid #7c7c7c;
13             overflow: hidden;
14         }
15         .notice-tit{
16             height: 27px;
17             background-color: #eaeaea;
18             position: relative;
19         }
20         .notice-tit ul{
21             position: absolute;
22             width: 300px;
23             left: -1px;
24         }
25         
26         .notice-tit ul li{
27             float: left;
28             width: 58px;
29             height: 26px;
30             line-height: 26px;
31             text-align: center;
32             border-bottom: 1px solid #7c7c7c;
33             padding: 0 1px;
34         }
35         .notice-tit ul a{
36             text-decoration: none;
37             display: block;
38         }
39         .notice-tit ul .select{
40             background-color: white;
41             border-right: 1px solid #7c7c7c;
42             border-left: 1px solid #7c7c7c;
43             border-bottom: 1px solid white;
44             padding: 0;
45         }
46         /*.notice-tit ul li:hover{
47             background-color: white;
48             border-right: 1px solid #7c7c7c;
49             border-left: 1px solid #7c7c7c;
50             border-bottom: 1px solid white;
51             padding: 0;
52         }*/
53 </script>

注意:1.須要給.notice-tit這個盒子設置相對定位，ul設置絕對定位而且left:-1px(若是不設置-1，ul這個盒子不會和.notice-tit這個盒子徹底重疊，由於.notice-tit有個1px 的邊框);

　　　2.要給ul下面的li標籤設置左右padding 1px；當懸浮的時候出現左右1px的border，同時把當前懸浮的li左右padding設置爲0,這樣懸浮的時候不會由於li加了2px的左右邊框而致使寬度增長;

而後是HTML結構：

 1 <div class="notice">
 2         <div class="notice-tit" id="notice-tit">
 3             <ul>
 4                 <li class="select"><a href="#">公告</a></li>
 5                 <li><a href="#">規則</a></li>
 6                 <li><a href="#">論壇</a></li>
 7                 <li><a href="#">安全</a></li>
 8                 <li><a href="#">公益</a></li>
 9             </ul>
10         </div>
11         <div class="notice-con" id="notice-con">
12             <div style="display: block">我是內容1</div>
13             <div style="display: none">我是內容2</div>
14             <div style="display: none">我是內容3</div>
15             <div  style="display: none">我是內容4</div>
16             <div  style="display: none">我是內容5</div>
17         </div>
18     </div>

首先定個小目標好比實現簡單的點擊或者懸浮的TAB切換：

1.獲取#notice-tit下面的全部li節點，獲取#notice-con下面的全部div節點。

2.遍歷#notice-tit下面的全部li節點並添加ID和懸浮或者點擊事件。

　添加id的做用是懸浮在當前ID上時對應的顯示.notice-con內的div。

 1 <script>
 2     //獲取id封裝成一個函數$()方便調用
 3     function $(id){
 4     //若是傳入的參數類型爲字符串則獲取當前ID元素，不然返回id
 5         return typeof id==="string"?document.getElementById(id):id;
 6     }
 7     //window.onload表示當文檔加載完畢時執行函數
 8     window.onload=function(){
 9         //獲取#notice-tit下面的所有li元素
10         var titles=$('notice-tit').getElementsByTagName('li');
11         //獲取#notice-con下面的所有div元素
12         var divs=$('notice-con').getElementsByTagName('div');
13         //遍歷全部li標籤，給每一個li加上id和值，而且綁定事件
14         for(var i=0;i<titles.length;i++){
15             //給每一個li加上id和值
16             titles[i].id=i;
17             //給每一個li綁定事件
18             titles[i].onmouseover=function(){
19             //懸浮後首先應該初始化每一個li和div上的類和display
20                 for(var j=0;j<titles.length;j++){
21                     titles[j].className="";
22                     divs[j].style.display="none";
23                 }
24             //給當前懸浮元素添加屬性
25                 titles[this.id].className="select";
26                 divs[this.id].style.display="block";
27             }
28         }
29     }
30 </script>

---

初步效果實現了，若是須要點擊效果把上面的onmouseover改成onclick。通常的tab標籤有個延時的效果，更有利於用戶體驗，下面來加個定時器。

 1 <script>
 2     //獲取id封裝成一個函數$()方便調用
 3     function $(id){
 4     //若是傳入的參數類型爲字符串則獲取當前ID元素，不然返回id
 5         return typeof id==="string"?document.getElementById(id):id;
 6     }
 7     //window.onload表示當文檔加載完畢時執行函數
 8     window.onload=function(){
 9         //獲取#notice-tit下面的所有li元素
10         var titles=$('notice-tit').getElementsByTagName('li');
11         //獲取#notice-con下面的所有div元素
12         var divs=$('notice-con').getElementsByTagName('div');
13         //遍歷全部li標籤，給每一個li加上id和值，而且綁定事件
14         var timer=null;
15         for(var i=0;i<titles.length;i++){
16             //給每一個li加上id和值
17             titles[i].id=i;
18             //給每一個li綁定事件
19             titles[i].onmouseover=function(){
20             //this指向當前懸浮的對象並存進變量that中,用that作一個this的引用
21             var that=this;
22             //當存在定時器的時候咱們須要把它清除,若是懸浮的時間少於500毫秒，
23             //則不會執行後面的函數，通常定時器前面都須要有個清除的步驟。
24             if(timer){
25                 //清除定時器
26                 clearTimeout(timer);
27                 //初始化變量的值
28                 timer=null;
29             }
30             //設置定時器，執行函數的時間延遲了500毫秒
31             timer=setTimeout(function(){
32             //懸浮後首先應該初始化每一個li和div上的類和display
33                 for(var j=0;j<titles.length;j++){
34                     titles[j].className="";
35                     divs[j].style.display="none";
36                 }
37             //給當前懸浮元素添加屬性
38             //這個地方不能用this.id了，由於this指向了window這個對象了,
39                 titles[that.id].className="select";
40                 divs[that.id].style.display="block";},500);
41             }
42         }
43     }
44 </script>

---

 

下面來實現一個標籤頁輪播的效果

思路:設置一個索引index=0，和一個定時器timer，在定時器setInterval()中隔2秒不停的去把索引加一，而後根據索引找到對應的元素節點進行操做,注意index不能無限的增長，最大值根據li的數量來決定。

 1     window.onload=function(){
 2         var titles=$('notice-tit').getElementsByTagName('li');
 3         var divs=$('notice-con').getElementsByTagName('div');
 4         //聲明一個空的變量來儲存定時器
 5         var timer=null;
 6         //索引值，初始值爲0
 7         var index=0;
 8         //設置一個定時器,每隔2秒去執行函數
 9         timer=setInterval(function(){
10         //每執行一次index加一
11             index++;
12         //設置index的最大值，超過則設爲0
13             if(index>=titles.length){
14                 index=0;
15             }
16         //添加樣式前應初始化所有樣式
17             for(var i=0;i<titles.length;i++){
18                 titles[i].className="";
19                 divs[i].style.display="none";
20             }
21         //給索引爲index的節點去添加樣式
22             titles[index].className="select";
23             divs[index].style.display="block";
24         },2000); 
25     }

---

 

終極目標來了：tab懸浮切換+延時效果+自動輪播

 1 <script>    
 2     //獲取id封裝成一個函數$()方便調用
 3 function $(id){
 4         //若是傳入的參數類型爲字符串則獲取當前ID元素，不然返回id
 5             return typeof id==="string"?document.getElementById(id):id;
 6         }
 7         function tab(){
 8         //聲明 索引index，兩個變量來裝定時器，一個輪播定時器，一個延時定時器
 9         var index=0,timer=null,timer2=null;
10         var titles=$('notice-tit').getElementsByTagName('li');
11         var divs=$('notice-con').getElementsByTagName('div');
12         for(var j=0;j<titles.length;j++){
13             //給每一個li設置ID
14             titles[j].id=j;
15             //給每一個li綁定懸浮事件
16             titles[j].onmouseover=function(){
17             //懸浮時首先清除延時定時器
18                 clearInterval(timer);
19             //清除輪播定時器
20                 clearTimeout(timer2);
21             //初始化兩個定時器
22                 timer2=null;
23                 timer=null;
24             //this的一個引用，由於在setTimeout中this指向window對象
25                 var that=this;
26             //建立一個延時定時器
27                 timer2=setTimeout(function(){
28                     for(var i=0;i<titles.length;i++){
29                 titles[i].className="";
30                 divs[i].style.display="none";
31             }
32             titles[that.id].className="select";
33             divs[that.id].style.display="block";
34             //鼠標懸浮時改變index的值爲當前的id
35             index=that.id;
36                 },500);
37             }
38             //給每一個Li綁定鼠標離開時的事件
39             titles[j].onmouseout=function(){
40             //建立一個輪播定時器,離開時輪播能繼續進行,由於上面設置了index=that
41             //因此鼠標離開後會自動播放下一個tab
42             timer=setInterval(function(){
43                 index++;
44             if(index>=titles.length){
45                 index=0;
46             }
47             for(var i=0;i<titles.length;i++){
48                 titles[i].className="";
49                 divs[i].style.display="none";
50             }
51             titles[index].className="select";
52             divs[index].style.display="block";
53             },2000);
54             }
55         }
56         //建立以前看是否存在輪播定時器，有就清除掉
57         if(timer){
58             clearInterval(timer);
59             timer=null;
60         }
61         //建立一個輪播定時器
62         timer=setInterval(function(){
63             index++;
64             if(index>=titles.length){
65                 index=0;
66             }
67             for(var i=0;i<titles.length;i++){
68                 titles[i].className="";
69                 divs[i].style.display="none";
70             }
71             titles[index].className="select";
72             divs[index].style.display="block";
73         },2000);
74 }
75 tab();
76 </script>        

作這個標籤頁demo的過程當中感受單獨的功能作出來仍是比較能理解，難理解的是把三個功能作在一塊兒，重複作了幾遍，常常會卡殼，不知道下一步的思惟邏輯。下一步終極⁺目標是代碼優化了，上面的代碼太多的重複，後續如何，下回分解。