关于javascript选项卡的问题
<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>#div1.a...
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 .active{background: #4fb7cd;}
#div1 div{
width: 200px;
height: 200px;
background: #cccccc;
border: 1px solid #999;
display: none;
}
</style>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育">
<input type="button" value="培训">
<input type="button" value="出国">
<input type="button" value="招生">
<div style="display: block">1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
</div>
</body>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var aDiv=oDiv.getElementsByTagName('div');
var aBtn=oDiv.getElementsByTagName('input');
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function(){
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}
}
}
</script>
</html>
关于两个for循环及index和this求大神给通俗的解释一下，谢谢了 展开
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1 .active{background: #4fb7cd;}
#div1 div{
width: 200px;
height: 200px;
background: #cccccc;
border: 1px solid #999;
display: none;
}
</style>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育">
<input type="button" value="培训">
<input type="button" value="出国">
<input type="button" value="招生">
<div style="display: block">1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
</div>
</body>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var aDiv=oDiv.getElementsByTagName('div');
var aBtn=oDiv.getElementsByTagName('input');
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function(){
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}
}
}
</script>
</html>
关于两个for循环及index和this求大神给通俗的解释一下，谢谢了 展开
1个回答
展开全部
第一个for循环是遍历几个按钮选项卡循环，针对当前aBtn[i].onclick 按钮写点击函数
第二个for循环则是吧，重置全部的选项卡样式，和隐藏全部的选项卡内容，
this.className='active';//这个是当前选中的选项卡按钮【aBtn[i]对象】添加点击后样式
aDiv[this.index].style.display='block';//this.index == aBtn[i].index = i 这里先赋值了索引，不然获取不到当前点击索引值
第二个for循环则是吧，重置全部的选项卡样式，和隐藏全部的选项卡内容，
this.className='active';//这个是当前选中的选项卡按钮【aBtn[i]对象】添加点击后样式
aDiv[this.index].style.display='block';//this.index == aBtn[i].index = i 这里先赋值了索引，不然获取不到当前点击索引值
追问
大神能不能加个好友我还是迷迷糊糊的
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
