慕UI8820655
2016-11-23 09:26
这是为什么啊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ height: 200px; width: 200px; border: 1px solid saddlebrown; display: none; } </style> </head> <body> <!-- 获取选项卡和div --> <input type="button"id="btn1" value="选项卡一"/> <input type="button"id="btn2" value="选项卡二" /> <input type="button"id="btn3" value="选项卡三" /> <div id="div1" style="display: block;">内容一</div> <div id="div2">内容一2</div> <div id="div3">内容一3</div> <script> var btns=document.getElementsByTagName("input"); var odiv=document.getElementsByTagName("div"); for(var i=0;l=btns.length,i<l;i++){ !function(i){ odiv=document.getElementsByTagName("div"); btns[i].onclick=function(){ deColor(); btns[i].style.background='blue'; boxHide(); odiv[i].style.display='block' //alert(odiv[i].innerHTML) } }(i) } //给所有的btns清除背景色 function deColor(){ for(var i=0;i<btns.length;i++){ btns[i].style.background=''; } } //注意,div只能3个,所有div隐藏,其实不建议用TagName,用className比较好,注意ie兼容就好,可以学习下 //课程http://www.imooc.com/learn/138 function boxHide(){ for(var i=0;i<btns.length;i++){ odiv[i].style.display='none' } } </script> </body> </html>
亲,我是用闭包的方法,做这个功能的,为什么用闭包,是因为for循环是一次性吧所有i都循环出来,我也理解你之前的btns.index=i;,他是给每个下标i分类吧,不过我没用这种方法
var i=0;l=btns.length,i<l;i++
for循环里面有个小于号被转义了,相信你看的出来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 200px;
width: 200px;
border: 1px solid saddlebrown;
display: none;
}
</style>
</head>
<body>
<!--
获取选项卡和div
-->
<input type="button"id="btn1" value="选项卡一"/>
<input type="button"id="btn2" value="选项卡二" />
<input type="button"id="btn3" value="选项卡三" />
<div id="div1" style="display: block;">内容一</div>
<div id="div2">内容一2</div>
<div id="div3">内容一3</div>
<script>
var btns=document.getElementsByTagName("input");
var div=document.getElementsByTagName("div");
for(var i=0;i<btns.length;i++){
//console.log(i);//0,1,2
btns.index=i;//i=0,1,2自定义一个index属性n
var last=btns[i];//上一个
btns[i].onclick=function(){
last.style.background="";
alert();
//div[].style.display="none";
this.style.backgroundColor="blue";
//div[2].style.display="block";
last=this;
}
}
</script>
</body>
</html>
我竟然有点看不懂你的代码,声明index并赋值是btns.index=i么,不应该是var index=i;么
你console.log(last.index)看看能出来什么
JavaScript进阶篇
468785 学习 · 22562 问题
相似问题