富贵资源网 Design By www.hznty.com
本文实例为大家分析了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="/UploadFiles/2021-04-02/hao123.js">效果图：
调试笔记：
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都隐藏 }以上就是本文的全部内容，希望对大家的学习有所帮助。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。