                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

我自己寫的script代碼無法運行，這是為什么？

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>實踐題 - 選項卡</title>

? ? <style type="text/css">

? ? ? ? *{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>

? ? <script>

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>

? ? ? ? <li>房產</li>

? ? ? ? <li>家居</li>

? ? ? ? <li>二手房</li>

? ? </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>

</div>

</body>

</html>

木子李20150707

2016-01-19

源自：JavaScript進階篇 10-1

關注問題我要回答

1069

操作

收起

2 回答

伊望歲月
2016-01-19

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取值的問題