基於javascript實現tab選項卡切換特效調試筆記
編輯：關於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都隱藏
}
以上就是本文的全部內容，希望對大家的學習有所幫助。
小編推薦
熱門推薦