首先是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的過程中感覺單獨的功能做出來還是比較能理解，難理解的是把三個功能做在一起，重復做了幾遍，經常會卡殼，不知道下一步的思維邏輯。下一步終極+目標是代碼優化了，上面的代碼太多的重復，后續如何，下回分解。