JS实现选项卡效果的代码实例
选项卡这个效果估计以后的项目会经常涉及到,对代码还是半熟练的情况下还是写下来吧。
先来布局一个简单的页面:
*{margin:0;padding:0;list-style:none;}
#box{margin:50px;}
#boxli{width:100px;height:40px;line-height:40px;text-align:center;background-color:#d8d8d8;margin-right:2px;float:left;}
#box.active{background:red;}
#content{clear:both;}
#contentdiv{width:404px;height:200px;border:1pxsolid#d8d8d8;display:none;}
新闻
社会
科技
娱乐
选项卡的制作原理是:有若干的选项和对应数量的内容,当对其中一个选项进行操作时,显示对应内容,其他内容不显示。所以,在页面布局的时候,我们先给一个选项设置特殊样式和显示其对应的内容,其他选项样式不变,对应内容隐藏。当操作选项时,把选项的类名改为特殊样式的类名,并且显示对应内容。
window.onload=function(){
varoBox=document.getElementById('box');
varaLi=oBox.getElementsByTagName('li');
varoCon=document.getElementById('content');
varaDiv=oCon.getElementsByTagName('div');
for(vari=0;i
今天在做选项卡效果时遇到了一个非常低级的错误,但却迟迟找不到原因,如下:
这个是我布局的选项卡的菜单,看起来很简单,一个ul包着3个li,其中一个是|,所以可以点击的菜单项只有两项,没毛病。
必备软件
|
常用软件
内容就不看了,接下来我就开始写JS的代码,getElementById什么的巴拉巴拉开始写,写完for循环觉得写完了,然后就运行。。。默认页正常,点击,,空白。?????怎么回事?F12,aLink[i]isundefind;加了一个console.log,检测获取的aLi,aLink,有值,能获取,没错。然后下面循环检测aLink[i],未定义,这是什么情况?在JS代码搞了将近一个小时,换获取方法,换变量名….各种方法,没效果。万万没想到的是,重新检测aLi的时候,发现长度为3。。顿时懵逼,aLink的长度为2,所以肯定有一个找不到。赶紧把第二个li改成span,成功。万恶的||||||||。只能说自己的知识还不够,还要继续努力!!!
varoBox=document.getElementById('box');
varoNav=document.getElementById('nav');
varaLi=oNav.getElementsByTagName('li');
varoCon=document.getElementById('con');
varaLink=oBox.getElementsByClassName('hide');
for(vari=0;i
以上所述是小编给大家介绍的JS选项卡效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!