关于JS选项卡的一个很简单的问题，问题在JS代码里面。
<style>#div1input{background:#CCC;}#div1.active{background:yellow;}#div1div{width:200...
<style>
#div1 input {background:#CCC;}
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
//var aBtn=oDiv.getElementsByTagName('input')[0]为什么这样写会出错？;
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
var i=0;
for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function()
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none'
}
this.className='active'
aDiv[this.index].style.display='block'
}
}
}
</script>
<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="财经" />
<input type="button" value="aaa" />
<div style="display:block;">1asdfasdfds</div>
<div>2xzcvxzcv</div>
<div>5332342345</div>
</div>
问题在JS代码里面。 展开
#div1 input {background:#CCC;}
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
//var aBtn=oDiv.getElementsByTagName('input')[0]为什么这样写会出错？;
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
var i=0;
for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function()
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none'
}
this.className='active'
aDiv[this.index].style.display='block'
}
}
}
</script>
<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="财经" />
<input type="button" value="aaa" />
<div style="display:block;">1asdfasdfds</div>
<div>2xzcvxzcv</div>
<div>5332342345</div>
</div>
问题在JS代码里面。 展开
1个回答
展开全部
var aBtn=oDiv.getElementsByTagName('input')[0];只是获取第一个button按钮对象。而你下面的操作是遍历一个button按钮数组对象。
var aBtn=oDiv.getElementsByTvagName('input');正好是获取页面上的所有button按钮数组集合。
var aBtn=oDiv.getElementsByTvagName('input');正好是获取页面上的所有button按钮数组集合。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
