这是为什么啊，style属性未定义
这是为什么啊
慕UI8820655
2016-11-23
5 回答
<!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分类吧，不过我没用这种方法
<!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>
查看2条回复
举报
0/150
提交
取消
