在我們平時瀏覽網站的時候，經常看到的特效有圖片輪播、導航子菜單的隱藏、tab標簽的切換等等。這段時間學習了JS后，開始要寫出一些簡單的特效。今天我也分享一個簡單tab標簽切換的例子。先附上代碼：
HTML代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/tab.js" type="text/javascript" ></script> <style type="text/css"> li { list-style: none; } * { padding: 0; margin: 0; } .tab-list { text-align: center; line-height: 40px; font-family: "微軟雅黑"; height: 40px; border-bottom: none; } .tab-list li { float: left; border: 1px solid #000; border-right: none; width: 100px; cursor: pointer; } .tab-list li:last-of-type { border-right: 1px solid #000; } .tab-content li { width: 302px; height: 300px; border: 1px solid #000; text-align: center; line-height: 300px; margin-top: 0px; } </style> </head> <body> <div class="tab"> <ul class="tab-list"> <li>one</li> <li>two</li> <li>three</li> </ul> <ul class="tab-content"> <li style="background-color:cornflowerblue;">我是one</li> <li style="display: none;background-color: burlywood;">我是two</li> <li style="display: none;background-color:mediumaquamarine;">我是three</li> </ul> </div> </body> </html>
JS代碼：
var eItemList = document.querySelectorAll(".tab-list li"); var eContentList = document.querySelectorAll(".tab-content li"); //給元素編號 for (var i=0;i<eItemList.length;i++) { eItemList[i].index=i; //index是自定義屬性，用來保存編號 eItemList[i].onmouseover=function() { for (var i=0;i<eContentList.length;i++) { eContentList[i].style.display="none"; //先將內容全部隱藏 } eContentList[this.index].style.display="block"; //當鼠標觸發時再顯示對應的內容 for (var i=0;i<eItemList.length;i++) { eItemList[i].style.background="none"; //將背景色設置為無 } eItemList[this.index].style.background="indianred"; }; }
效果如下：
在做Tab標簽切換時，首先是先寫好整體框架。在這里，先將內容區的三個div分別隱藏。然后當鼠標放在tab標簽上時，再執行相關操作，將div內容顯示出來。關鍵的問題是如何將標簽與內容區對應起來。所以，用 eItemList[i].index=i; 設置當前元素的編號。然后eContentList[this.index],將tab元素與內容區關聯起來。