基于javascript的制表符切换效果调试说明

本文分析了javascript实现tab tab切换的调试注意事项，供大家参考。具体内容如下。

制作导航栏。当您单击导航栏元素时，以下内容将相应地改变，并且该元素将显示特殊的样式。

Js源代码：

//在导航栏中，单击函数选项卡开关(_ this，num){ var tag=document . getelementbyid(' nav9 ')；var number=tag . getelementsbytagname(' a ')；//获取导航栏元素个数(getElementsByTagName为返回元素组)var div num=document . getelementsbyclasname('每个div ')；//获取导航元素对应的div编号(var I=0；in number . length；I ){ //number为数组，长度应显示为number.length.5number [I]。classname=//清除所有导航栏元素的特殊样式div num[I]。风格。显示='无'；//所有其他div都是隐藏的} _ this . class name=' l _ nav 1 _ no1 '；//将style 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=' http :/MyJS/Hao 123。js /脚本样式类型='text/css ' .l _ nav1 { height: 30px填充-top : 8px；} .l _ nav 1a { color : # 3c 3c；文本装饰：无；padding: 8px }。l_nav1 a:hover，# l _ nav 1 a : active { color : green；文本修饰：下划线；} .l_nav1 .l_nav1_no1 { /* "头条" */color:绿色；文本装饰：无；边框-top:实心1px绿色；} .l_no2 {背景色： # ffffffborder:实心1px # E0E 0；高度： 282px宽度： 276像素；飞越：卷轴；/*当元素内容太大而超出规定区域时，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

*/} .l_no2 ul{ /*列表部分*/padding-left : 0px；线高： 25pxfont-size : 14px；} .l _ NO2 ul Li {列表式：无；} .l _ no2 ul a { color: # 3C3C3C文本装饰：无；} .l _ NO2 ul a :激活l_no2 ul a:hover { color:红色；文本修饰：下划线；}/style/head body nav id=' nav 9 ' class=' l _ nav 1 ' 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 '！-默认为该差异显示- img src='http:/images/郝123/25。jpg ' width=' 274 px ' ul listrong style=' color : # 6C6C6C '/strong a href=' # '县领导找不着住建局长对其通报批评/a/Li listrong style=' color : # 6C6C '/strong a href=' # '女子亲热感觉'卡' 检查现'异形'侵体/a/Li listrong style=' color : # 6C6C '/strong a href=' # '大妈被女童玩具小车撞到叫来救护车/a/Li listrong style=' color : # 6C6C '/strong a href=' # '六旬老人遇老相识30元发生关系被抓/a/Li/ul/div div id=' l _ NO2 _ 2 ' class=' EachDiv ' style=' display : none ' img src=' http :/images/郝123/25.2。jpg ' width=' 274 px ' ul listrong style=' color : # 6C6C6C '/strong a href=' # '妻子产子收1200枚鸡蛋丈夫一天卖光/a/Li listrong style=' color : # 6C6C '/strong a href=' # '母猪产下八名男婴原因竟然如此凄凉/a/Li listrong style=' color : # 6C6C '/strong a href=' # '小夫妻宾馆开房隔壁大叔全程看直播/a/Li listrong style=' color : # 6C6C '/strong a href=' # '老汉自造房车囚禁两妙龄女边走边玩/a/Li/ul/div div id=' l _ NO2 _ 3 ' class=' EachDiv ' style=' display : none ' img src=' http :/images/郝123/25.3。jpg ' width=' 274 px ' ul listrong style=' color : # 6C6C6C '/strong a href=' # '金星追问陈坤儿子生母他还真招认了/a/Li listrong style=' color : # 6C6C '/strong a href=' # '台湾女星"酒后乱性"婆婆当场傻眼/a/Li listrong style=' color : # 6C6C '/strong a href=' # '车晓和前夫离婚后如此评价这段经历/a/Li listrong style=' color : # 6C6C '/strong a href=' # '韩国卖淫女星身份遭曝光！崔智娜在列/a/Li/ul/div div id=' l _ NO2 _ 4 ' class=' EachDiv ' style=' display : none ' img src=' http :/images/郝123/25.4。jpg ' width=' 274 px ' ul listrong style=' color : # 6C6C6C '/strong a href=' # '朝鲜愤然击落美军侦察机美为何认怂/a/Li listrong style=' color : # 6C6C '/strong a href=' # '多数人不知道中国已经买过四艘航母/a/Li listrong style=' color : # 6C6C '/strong a href=' # '中国两栖登陆王牌协同作战场面壮观/a/Li listrong style=' color : # 6C6C '/strong a href=' # '朝鲜惊人作战计划曝光：突袭朴槿惠/a/Li/ul/div div id=' l _ NO2 _ 5 ' class=' EachDiv ' style=' display : none ' img src=' http :/images/郝123/25.5。jpg ' width=' 274 px ' ul listrong style=' color : # 6C6C6C '/strong a href=' # '末战胜卡塔尔不够国足期待2队犯错/a/Li listrong style=' color : # 6C6C '/strong a href=' # '赛中产子属误传产妇是辽宁女排队员/a/Li listrong style=' color : # 6C6C '/strong a href=' # '球迷50万赌国足赢四球以上血本无归/a/Li listrong style=' color : # 6C6C '/strong a href=' # '高洪波：国足只能算一般队比较命苦/a/li /ul /div /div/body/html效果图：

调试注意事项：

1.错误一：

var number=tag . getelementsbytagname(' a ')。长度；

(1)错误报告：

(2)解释和更正：

**getElementsByTagName()是返回的元素组，如果再取其长度，number只是一个数字，所以number[i]。className=会报告错误。**

更正：

var number=tag . getelementsbytagname(' a ')；

2.错误2:

for(var I=0；成员；i ){ number[i]。className=//清除所有导航栏元素的特殊样式div num[I]。风格。显示='无'；//所有其他div都是隐藏的}这里的数字应该是一个数字，代表元素a的数量，从错误一可知，数字的长度应该改为：

for(var I=0；in number . length；I ){ //number为数组数[i]。className=//清除所有导航栏元素的特殊样式div num[I]。风格。显示='无'；//其他div全部隐藏}以上就是本文的全部内容，希望对大家的学习有所帮助。