慕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进阶篇
469063 学习 · 22582 问题
相似问题