js進階10-1編程挑戰，切換失敗，死活沒找出來哪里的bug
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{margin:0px;padding:0px;font:12px normal "microsoft yahei";}
.tabs{margin-left:25px;margin-top:25px;}
.tabs ul{list-style:none;display:block;height:30px;line-height:30px;width:290px;border-bottom:2px brown solid;}/*如果沒有設置ul的高度，那么div就會擠上去，跟在li后面*/
.tabs ul li{float:left;display:inline-block;list-style:none;cursor:pointer;margin:0px 3px;width:60px;height:28px;line-height:28px;text-align:center;border:1px solid #aaaaaa;border-bottom:none;}/*內聯塊狀元素可設置寬高，但是沒有獨占一行*/
.tabs div{width:283px;height:125px;line-height:25px;padding-left:5px;padding-top:5px;border:1px solid #336699;border-top:none;}
.tabs ul li.on{border-top:2px solid brown;border-bottom:2px solid white;}
.hide{display:none;}
</style>
<script type="text/javascript">
window.onload=function(){
var tabs=document.getElementsByClassName("tabs");
var uls=tabs.document.getElementsByTagName("ul")[0];
var lists=uls.document.getElementsByTagName("li");
var divs=tabs.document.getElementsByTagName("div");
for(var i=0,len=lists.length;i<len;i++){
lists[i].index=i;//先通過index給菜單欄的三項編號，比如你點擊菜單欄第二項 那么就要通過this.index來得到此時點擊的是第2個菜單項 ；直接刪掉不用index為什么不行？
lists[i].onclick=function(){
for(var n=0;n<len;n++){
lists[n].className="";
divs[n].className="hide";
}
this.className="on";//lists.className="on";為什么不行？
divs[this.index].className="";//divs[i].className="";為什么不行？
};
}
}
</script>
</head>
<body>
<div class="tabs">
? ? <ul>
? ? ? ? <li class="on">房產</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div>
? ? 275萬購昌平鄰鐵三居 總價20萬買一居<br />
? ? 200萬內購五環三居 140萬安家東三環<br />
? ? 北京首現零首付樓盤 53萬購東5環50平<br />
? ? 京樓盤直降5000 中信府公園樓王現房<br />
? ? </div>
? ? <div class="hide">
? ? 40平出租屋大改造 美少女的混搭小窩<br />
經典清新簡歐愛家 90平老房煥發新生<br />
新中式的酷色溫情 66平撞色活潑家居<br />
瓷磚就像選好老婆 衛生間煙道的設計<br />
? ? </div>
? ? <div class="hide">
? ? 通州豪華3居260萬 二環稀缺2居250w甩<br />
? ? 西3環通透2居290萬 130萬2居限量搶購<br />
黃城根小學學區僅260萬 121平70萬拋!<br />
? ? 獨家別墅280萬 蘇州橋2居優惠價248萬<br />
? ? </div>
</div>
</body>
</html>
2016-10-30
問題出在js最上面賦值，如注釋：
var?tabs=document.getElementsByClassName("tabs");??? var?uls=tabs.document.getElementsByTagName("ul")[0]; var?lists=uls.document.getElementsByTagName("li"); var?divs=tabs.document.getElementsByTagName("div"); //這里獲取元素用自義定的父元素就不需要加document了， //像第2條該這么寫：var?uls=tabs.getElementsByTagName("ul")[0];?同理第3，第4； //另外?第一條tabs賦值，雖然只有一個元素，但獲取的是一個類數組形式，因此也要加下標，就像第二條一樣，這么寫： //var?tabs=document.getElementsByClassName("tabs")[0];因此完整寫法如下：
var?tabs=document.getElementsByClassName("tabs")[0]; var?uls=tabs.getElementsByTagName("ul")[0]; var?lists=uls.getElementsByTagName("li"); var?divs=tabs.getElementsByTagName("div");