js進(jìn)階10-1編程挑戰(zhàn)，切換失敗，死活沒(méi)找出來(lái)哪里的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>無(wú)標(biāo)題文檔</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;}/*如果沒(méi)有設(shè)置ul的高度，那么div就會(huì)擠上去，跟在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;}/*內(nèi)聯(lián)塊狀元素可設(shè)置寬高，但是沒(méi)有獨(dú)占一行*/
.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;//先通過(guò)index給菜單欄的三項(xiàng)編號(hào)，比如你點(diǎn)擊菜單欄第二項(xiàng) 那么就要通過(guò)this.index來(lái)得到此時(shí)點(diǎn)擊的是第2個(gè)菜單項(xiàng) ；直接刪掉不用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">房產(chǎn)</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div>
? ? 275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買(mǎi)一居<br />
? ? 200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)<br />
? ? 北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平<br />
? ? 京樓盤(pán)直降5000 中信府公園樓王現(xiàn)房<br />
? ? </div>
? ? <div class="hide">
? ? 40平出租屋大改造 美少女的混搭小窩<br />
經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生<br />
新中式的酷色溫情 66平撞色活潑家居<br />
瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)<br />
? ? </div>
? ? <div class="hide">
? ? 通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩<br />
? ? 西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)<br />
黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!<br />
? ? 獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)<br />
? ? </div>
</div>
</body>
</html>
2016-10-30
問(wèn)題出在js最上面賦值，如注釋?zhuān)?br />
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條該這么寫(xiě)：var?uls=tabs.getElementsByTagName("ul")[0];?同理第3，第4； //另外?第一條tabs賦值，雖然只有一個(gè)元素，但獲取的是一個(gè)類(lèi)數(shù)組形式，因此也要加下標(biāo)，就像第二條一樣，這么寫(xiě)： //var?tabs=document.getElementsByClassName("tabs")[0];因此完整寫(xiě)法如下：
var?tabs=document.getElementsByClassName("tabs")[0]; var?uls=tabs.getElementsByTagName("ul")[0]; var?lists=uls.getElementsByTagName("li"); var?divs=tabs.getElementsByTagName("div");