在網頁開發中，常常會遇見很多Tab切換，Tab切換增加網頁瀏覽的舒適性，對於開發人員特別常見，本文使用JS實現tab切換效果，僅對學習中遇到的知識點做一個總結。 效果圖如下： 實現思路： 1.首先使用HTML和CSS構建靜態網頁如上，標題使用ul-li標簽，有浮動，主體使用四個大小一樣的盒子，不添加 ...
在網頁開發中，常常會遇見很多Tab切換，Tab切換增加網頁瀏覽的舒適性，對於開發人員特別常見，本文使用JS實現tab切換效果，僅對學習中遇到的知識點做一個總結。
效果圖如下：
實現思路：
1.首先使用HTML和CSS構建靜態網頁如上，標題使用ul-li標簽，有浮動，主體使用四個大小一樣的盒子，不添加JS時候，盒子豎直排列（很醜很醜）
2.添加JS代碼
2.1 首先實現標題的Tab效果
2.1.1獲取所有的li元素，註冊滑鼠進入事件，在滑鼠進入事件中，清除所有的li元素樣式，然後給當前li元素添加樣式
2.1.2在註冊事件前，給所有的li元素通過setAttribute()方法給li挨個添加index屬性，記錄標簽的序號，方便和主體div對應
2.2 實現所有的主體模塊Tab效果
2.2.1 獲取所有的主體DIV，與標簽進行綁定，通過getAttribute()方法獲得當前標簽的索引，通過該索引得到DIV集合中與標簽對應的div
代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 padding: 0px; 9 margin: 0px; 10 } 11 /* 總體大盒子 */ 12 #box{ 13 width: 400px; 14 height: 300px; 15 border: 1px solid gray; 16 margin: 100px auto auto; 17 } 18 /* 大盒子中頭部小盒子ul */ 19 #hd{ 20 height: 45px; 21 } 22 /* 小盒子ul中li標簽 */ 23 #hd li{ 24 height: 45px; 25 display: inline-block; 26 line-height: 45px; 27 width: 98px; 28 text-align: center; 29 border: 1px solid gray; 30 float: left; 31 list-style: none; 32 } 33 /* 大盒子中主體小盒子 */ 34 #bd{ 35 height: 255px; 36 } 37 /* 各個小版塊 */ 38 #bd div{ 39 height: 100%; 40 display: none; 41 42 } 43 44 #bd,#hd .current{ 45 display: block; 46 background-color: #ECEEF1; 47 } 48 </style> 49 50 </head> 51 <body> 52 <div id="box"> 53 <ul id="hd"> 54 <li class="current">體育</li> 55 <li>娛樂</li> 56 <li>新聞</li> 57 <li>綜合</li> 58 </ul> 59 60 <div id="bd"> 61 <div class="current" style="display: block;">這是體育頻道</div> 62 <div>這是娛樂頻道</div> 63 <div>這是新聞頻道</div> 64 <div>這是綜合頻道</div> 65 </div> 66 </div> 67 <!-- 插入JS代碼 --> 68 <script> 69 // 思路: 70 // 1.實現標題小模塊的Tab切換 71 // 1.1 首先給所有的標題小模塊清除樣式 72 // 1.2 給滑鼠移入的標題小模塊添加樣式 73 // 2.實現主體模塊和標題小模塊之間的綁定 74 // 2.1 給標題小模塊添加一個屬性index,用以記錄標題小模塊的索引 75 // 2.2 通過getAttribute()方法得到索引,從而對應主體模塊的內容 76 var hd=document.getElementById('hd'); 77 //獲得所有的標題小模塊 78 var lis=hd.getElementsByTagName('li'); 79 //獲得所有的主體模塊 80 var bd=document.getElementById('bd'); 81 var divs=bd.getElementsByTagName('div'); 82 //給所有的li註冊事件 83 for(var i=0;i<lis.length;i++){ 84 var li=lis[i]; 85 li.setAttribute('index',i); 86 li.onmouseover=function(){ 87 //每次滑鼠移入的時候,清除所有的小模塊樣式,只給當前的小模塊加入樣式 88 for(var i=0;i<lis.length;i++){ 89 lis[i].className="";//所有模塊樣式清除 90 this.className="current"; 91 //滑鼠移入的時候,給所有的主體模塊清除樣式,然後給對應當前小模塊的主體模塊添加樣式 92 divs[i].className=""; 93 divs[i].style.display="none"; 94 95 //對當前的模塊的進行操作 96 var index=parseInt(this.getAttribute('index')); 97 divs[index].className="current"; 98 divs[index].style.display="block"; 99 } 100 } 101 } 102 </script> 103 </body> 104 </html>
