基于javascript实现tab选项卡切换特效调试笔记【javascript】

web前端|js教程

javascript,tab选项卡切换,javascript选项卡切换

web前端-js教程

本文实例为大家分析了javascript实现tab选项卡切换的调试笔记，供大家参考，具体内容如下

记账 源码 php,ubuntu开发+多大固态,爬虫舞蹈视频教学,doxygen php,seo精华网站lzw

制作导航栏，点击导航栏元素时下面的内容会产生相应的变化，并且该元素显示特殊样式。

源码包怎么下载 迅雷下载 迅雷下载地址,ubuntu驅動管理,tomcat怎样才启动成功,爬虫 应用市场,前后端分离php,谷歌seo易海创腾i在那儿lzw

js源代码：

92源码库网,vscode选中同样的代码,ubuntu配置网线,tomcat里中文乱码,华哥爬虫,php.ini 修改无效,沅江seo优化关键词,精品课程类似网站源码,mw-t系动态模板 mw-t1商业版lzw

//导航栏单击变换内容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代码：

.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; }

调试笔记：

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都隐藏 }