基于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

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应该是一个数字，代表a元素的个数，由错误一可知，获取number的长度，即应该改为：

for(var i=0;i

以上就是本文的全部内容，希望对大家的学习有所帮助。