快捷導(dǎo)航

基于javascript實現(xiàn)tab選項卡切換特效調(diào)試筆記

更新時間：2024年07月03日 16:55:45 投稿：lijiao

這篇文章主要介紹了基于javascript實現(xiàn)tab選項卡切換特效調(diào)試筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分析了javascript實現(xiàn)tab選項卡切換的調(diào)試筆記，供大家參考，具體內(nèi)容如下

制作導(dǎo)航欄，點擊導(dǎo)航欄元素時下面的內(nèi)容會產(chǎn)生相應(yīng)的變化，并且該元素顯示特殊樣式。

js源代碼：

//導(dǎo)航欄單擊變換內(nèi)容
function tabSwitch(_this,num) {
 var tag = document.getElementById("nav9");
 var number = tag.getElementsByTagName("a"); //獲取導(dǎo)航欄元素個數(shù)(getElementsByTagName是返回元素素組)
 var divNum = document.getElementsByClassName("eachDiv"); //獲取導(dǎo)航元素對應(yīng)的div個數(shù)
 for(var i=0;i<number.length;i++){ //number是一個數(shù)組，這里應(yīng)該用number.length顯示它的長度5
  number[i].className = " "; //清除所有導(dǎo)航欄元素的特殊樣式
  divNum[i].style.display = "none"; //其他所有div都隱藏
 }
 _this.className = "l_nav1_no1"; //給當(dāng)前導(dǎo)航欄元素添加樣式
 var content = document.getElementById("l_no2_"+num); //當(dāng)前導(dǎo)航欄元素對應(yīng)的div
 content.style.display = "block"; //顯示當(dāng)前導(dǎo)航欄元素對應(yīng)的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; /*當(dāng)元素內(nèi)容太大而超出規(guī)定區(qū)域時，內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。。*/
  }
  .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"> <!--默認(rèn)為該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="#">檢查現(xiàn)"異形"侵體</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">大媽被女童玩具小車撞到 叫來救護(hù)車</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">六旬老人遇老相識</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="#">妻子產(chǎn)子收1200枚雞蛋 丈夫1天賣光</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#">母豬產(chǎn)子</a></li>
    <li><strong style="color: #6C6C6C">·</strong><a href="#"></a></li>
    <li>
  </ul>
  </div>
  <div id="l_no2_3" class="eachDiv" style="display: none">
   <img src="../images/hao123/25.3.jpg" width="274px">
  </div>
  <div id="l_no2_4" class="eachDiv" style="display: none">
   <img src="../images/hao123/25.4.jpg" width="274px">
  </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="#"></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>

調(diào)試筆記：

1.錯誤一：

var number = tag.getElementsByTagName("a").length;

（1）報錯：

（2）解釋及改正：

　　**getElementsByTagName()就是返回元素素組，如果再取它的長度的話，number就只是一個數(shù)字，所以number[i].className = " ";就會報錯。**

　　改正：

var number = tag.getElementsByTagName("a");

2.錯誤二：

 for(var i=0;i<number;i++){ 
  number[i].className = " "; //清除所有導(dǎo)航欄元素的特殊樣式
  divNum[i].style.display = "none"; //其他所有div都隱藏
 }

這里的number應(yīng)該是一個數(shù)字，代表a元素的個數(shù)，由錯誤一可知，獲取number的長度，即應(yīng)該改為：

for(var i=0;i<number.length;i++){ //number是一個數(shù)組
  number[i].className = " "; //清除所有導(dǎo)航欄元素的特殊樣式
   divNum[i].style.display = "none"; //其他所有div都隱藏
  }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: