為何實現(xiàn)不了DIV切換，請大神解答
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */ ?
? ? ?*{margin:0;padding:0;font:normal 12px "微軟雅黑";color:#000000;}
? ? ?a{text-decoration: none;}
? ? ?#tab-list{width: 275px;height:190px;margin: 20px auto; padding:20px;}
? ? #tab-list ul{height: 32px; border-bottom: 2px solid #8B4513;display:block; line-height:30px; list-style-type: none;}
? ??
? ? ?#tab-list ul li{display: inline-block; width: 60px; line-height: 28px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px; height=28px;}
? ? ?
? ? ?#tab-list li:hover{cursor: pointer;}
? ? ?#tab-list ul li.on{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
? ? ?#tab-list div{border: 1px solid #7396B8;border-top: none; height:120px; ?line-height: 30px;padding:5px;}
? ? ?
? ? ?
? ? ?.hide{display: none;} ?
? ? ? ?
? ? </style>
? ? <script type="text/javascript">
? ? ?var dvom=document.getElementById("tab-list");
? ? ?var dvul=dvom.getElementsByTagName("ul")[0];
? ? ?var dvli=dvul.getElementsByTagName("li");
? ? ?var dvdiv=dvom.getElementsByTagName("div");
? ? ?
? ? ?for(var i=0,len=dvli.length; i<len; i++){
? ? ? ? ?dvli[i].index=i;
? ? ? ? ?dvli[i].onclick=function(){
? ? ? ? ? ? ?for(var n=0; n<len; n++){
? ? ? ? ? ? ? ? ?dvli[n].className="";
? ? ? ? ? ? ? ? ?dvdiv[n].className="hide";
? ? ? ? ? ? ?}
? ? ? ? ? ? ?this.className="on";
? ? ? ? ? ? ?dvdiv[this.index].className="";
? ? ? ? ?}
? ? ?}
?
? ??
? ? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="tab-list">
? ? <ul>
? ? ? ? <li class="on">房產(chǎn)</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div>
? ? ? ? ? ? <a href="javascript:;">275萬購昌平鄰鐵三居 總價20萬買一居</a><br/>
? ? ? ? ? ? <a href="javascript:;">200萬內購五環(huán)三居 140萬安家東三環(huán)</a><br/>
? ? ? ? ? ? <a href="javascript:;">北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</a><br/>
? ? ? ? ? ? <a href="javascript:;">京樓盤直降5000 中信府 公園樓王現(xiàn)房</a>
? ? </div> ? ?
? ? <div class="hide">
? ? ? ? ? ? <a href="javascript:;">40平出租屋大改造 美少女的混搭小窩</a><br/>
? ? ? ? ? ? <a href="javascript:;">經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</a><br/>
? ? ? ? ? ? <a href="javascript:;">新中式的酷色溫情 66平撞色活潑家居</a><br/>
? ? ? ? ? ? <a href="javascript:;">瓷磚就像選好老婆 衛(wèi)生間煙道的設計</a>
? ? ? ??
? ? </div> ? ?
? ? <div class="hide">
? ? ? ?
? ? ? ? ? ? <a href="javascript:;">通州豪華3居260萬 二環(huán)稀缺2居250w甩</a><br/>
? ? ? ? ? ? <a href="javascript:;">西3環(huán)通透2居290萬 130萬2居限量搶購</a><br/>
? ? ? ? ? ? <a href="javascript:;">黃城根小學學區(qū)僅260萬 121平70萬拋!</a><br/>
? ? ? ? ? ? <a href="javascript:;">獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬</a>
? ? ? ??
? ? </div>
</div>
?
</body>
</html>
2016-03-29
最重要的一點
1.你沒“調用”函數(shù)，加上window.onload=funciton(){},把你的js代碼放在大括號里面
2.有了1，你的切換已經(jīng)成攻，但是樣式那有點問題，需要在on樣式里加上margin-top: 2px ?這樣就完美啦