我自己写的script代码无法运行，这是为什么？-慕课网

首页课程实战体系课手记专栏慕课教程

我自己写的script代码无法运行，这是为什么？

来源：10-1 编程挑战

木子李20150707

2016-01-19 14:24

<!DOCTYPE html>

<html>

<head>

*{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}

#tabs {width:290px;padding:5px;height:150px;margin:20px;}

#tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}

#tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}

#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}

#tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}

.hide{display: none;}

</style>

var maindiv=document.getElementById("tabs");

var lis=maindiv.getElementsByTagName("li");

var divs=maindiv.getElementsByTagName("div");

for(var i=0;i<lis.length;i++){

lis[i].onclick=function(){

lis[i].setAttribute("class","on");

divs[i].setAttribute("class","");

for(var j=0;j<lis.length;j++){

if(i!=j){

lis[j].setAttribute("class","");

divs[j].setAttribute("class","hide");

}

</script>

</head>

<body>

<ul>

</ul>

<div>

275万购昌平邻铁三居总价20万买一居<br>

200万内购五环三居 140万安家东三环<br>

北京首现零首付楼盘 53万购东5环50平<br>

京楼盘直降5000 中信府公园楼王现房<br>

</div>

<div>

40平出租屋大改造美少女的混搭小窝<br>

经典清新简欧爱家 90平老房焕发新生<br>

新中式的酷色温情 66平撞色活泼家居<br>

瓷砖就像选好老婆卫生间烟道的设计<br>

</div>

<div>

通州豪华3居260万二环稀缺2居250w甩<br>

西3环通透2居290万 130万2居限量抢购<br>

黄城根小学学区仅260万 121平70万抛!<br>

独家别墅280万苏州桥2居优惠价248万<br>

</div>

</body>

</html>

写回答关注

2回答

伊望岁月: 2016-01-19 15:32:07

window.onload = function(){
	var maindiv=document.getElementById("tabs");
	var lis=maindiv.getElementsByTagName("li");
	var divs=maindiv.getElementsByTagName("div");
	for(var i=0;i<lis.length;i++){
		(function(i){
			lis[i].onclick=function(){
				lis[i].setAttribute("class","on");
				divs[i].setAttribute("class","");
				for(var j=0;j<lis.length;j++){
					if(i!=j){
						lis[j].setAttribute("class","");
						divs[j].setAttribute("class","hide");
					}
				}
			};
		})(i);
	}
};

改成这样吧，js放在html前，所以获取不了tabs元素，要加window.load。

还有就是用for循环绑定事件i取值的问题

0 0