首頁 > 開發者 > JavaScript
本文執行個體為大家分析了javascript實現tab選項卡切換的調試筆記，供大家參考，具體內容如下
製作導覽列，點擊導覽列元素時下面的內容會產生相應的變化，並且該元素顯示特殊樣式。
js原始碼：
//導覽列單擊變換內容function tabSwitch(_this,num) { var tag = document.getElementById("nav9"); var number = tag.getElementsByTagName("a"); //擷取導覽列元素個數(getElementsByTagName是返回元素素組) var divNum = document.getElementsByClassName("eachDiv"); //擷取導航元素對應的div個數 for(var i=0;i<number.length;i++){ //number是一個數組，這裡應該用number.length顯示它的長度5 number[i].className = " "; //清除所有導覽列元素的特殊樣式 divNum[i].style.display = "none"; //其他所有div都隱藏 } _this.className = "l_nav1_no1"; //給當前置航欄元素添加樣式 var content = document.getElementById("l_no2_"+num); //當前置航欄元素對應的div content.style.display = "block"; //顯示當前置航欄元素對應的div部分}
HTML代碼：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../MyJS/hao123.js"></script> <style type="text/css"> .l_nav1 { height: 30px; padding-top: 8px; } .l_nav1 a{ color: #3C3C3C; text-decoration: none; padding: 8px; } .l_nav1 a:hover,#l_nav1 a:active { color: green; text-decoration: underline; } .l_nav1 .l_nav1_no1 { /*“頭條”*/ color: green; text-decoration: none; border-top: solid 1px green; } .l_no2 { background-color: #ffffff; border: solid 1px #E0E0E0; height: 282px; width: 276px; overflow: scroll; /*當元素內容太大而超出規定地區時，內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容。。*/ } .l_no2 ul{ /*列表部分*/ padding-left: 0px; line-height: 25px; font-size: 14px;; } .l_no2 ul li{ list-style: none; } .l_no2 ul a{ color: #3C3C3C; text-decoration: none; } .l_no2 ul a:active,.l_no2 ul a:hover { color: red; text-decoration: underline; } </style></head><body> <nav id="nav9" class="l_nav1"> <a href="#" onclick="tabSwitch(this,1)" class="l_nav1_no1">頭條</a> <a href="#" onclick="tabSwitch(this,2)">社會</a> <a href="#" onclick="tabSwitch(this,3)">娛樂</a> <a href="#" onclick="tabSwitch(this,4)">軍事</a> <a href="#" onclick="tabSwitch(this,5)">體育</a> </nav> <div class="l_no2"> <div id="l_no2_1" class="eachDiv" style="display: block"> <!--預設為該div顯示--> <img src="../images/hao123/25.jpg" width="274px"> <ul> <li><strong style="color: #6C6C6C">·</strong><a href="#">縣領導找不著住建局長 對其通報批評</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">女子親熱感覺"卡" 檢查現"異形"侵體</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">大媽被女童玩具小車撞到 叫來救護車</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">六旬老人遇老相識 30元發生關係被抓</a></li> </ul> </div> <div id="l_no2_2" class="eachDiv" style="display: none"> <img src="../images/hao123/25.2.jpg" width="274px"> <ul> <li><strong style="color: #6C6C6C">·</strong><a href="#">妻子產子收1200枚雞蛋 丈夫1天賣光</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">母豬產下八名男嬰 原因竟然如此淒涼</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">小夫妻賓館開房 隔壁大叔全程看直播</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">老漢自造房車囚禁兩妙齡女 邊走邊玩</a></li> </ul> </div> <div id="l_no2_3" class="eachDiv" style="display: none"> <img src="../images/hao123/25.3.jpg" width="274px"> <ul> <li><strong style="color: #6C6C6C">·</strong><a href="#">金星追問陳坤兒子生母 他還真招認了</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">台灣女星“酒後亂性” 婆婆當場傻眼</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">車曉和前夫離婚後 如此評價這段經曆</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">韓國賣淫女星身份遭曝光！G.NA在列</a></li> </ul> </div> <div id="l_no2_4" class="eachDiv" style="display: none"> <img src="../images/hao123/25.4.jpg" width="274px"> <ul> <li><strong style="color: #6C6C6C">·</strong><a href="#">朝鮮憤然擊落美軍偵察機 美為何認慫</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">多數人不知道 中國已經買過四艘航母</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">中國兩棲登陸王牌協同作戰 場面壯觀</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">朝鮮驚人作戰計劃曝光：突襲樸槿惠</a></li> </ul> </div> <div id="l_no2_5" class="eachDiv" style="display: none"> <img src="../images/hao123/25.5.jpg" width="274px"> <ul> <li><strong style="color: #6C6C6C">·</strong><a href="#">末戰勝卡塔爾不夠 國足期待2隊犯錯</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">賽中產子屬誤傳 產婦是遼寧女排隊員</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">球迷50萬賭國足贏4球以上 血本無歸</a></li> <li><strong style="color: #6C6C6C">·</strong><a href="#">高洪波：國足只能算一般隊 比較命苦</a></li> </ul> </div> </div></body></html>
效果圖：
調試筆記：
1.錯誤一：
var number = tag.getElementsByTagName("a").length;
（1）報錯：
（2）解釋及改正：
**getElementsByTagName()就是返回元素素組，如果再取它的長度的話，number就只是一個數字，所以number[i].className = " ";就會報錯。**
改正：
var number = tag.getElementsByTagName("a");
2.錯誤二：
for(var i=0;i<number;i++){ number[i].className = " "; //清除所有導覽列元素的特殊樣式 divNum[i].style.display = "none"; //其他所有div都隱藏 }
這裡的number應該是一個數字，代表a元素的個數，由錯誤一可知，擷取number的長度，即應該改為：
for(var i=0;i<number.length;i++){ //number是一個數組 number[i].className = " "; //清除所有導覽列元素的特殊樣式 divNum[i].style.display = "none"; //其他所有div都隱藏 }
以上就是本文的全部內容，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
