求大神講解,哪里錯(cuò)了
<!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>選項(xiàng)卡切換</title>
<style type="text/css">
*{padding:0;margin:0;font-size:14px;color:#000;}
ul{list-style:none;}
a{text-decoration:none;}
#tab{width:275px;height:190px;margin:20px auto;}
#title{height:32px;border-bottom:2px solid #f0f;}
#title li{display:inline-block;width:60px;border:1px solid #ccc;border-bottom:none;text-align:center;margin-left:5px;}
#title li:hover{cursor:pointer;}<!--是鼠標(biāo)變成手指狀-->
#title li:active{border-top:2px solid #f0f;border-bottom:2px solid #fff;}
#tab div{border:1px solid #ccc;border-top:none;}
#tab div li{height:30px;line-height:30px;text-indent:8px;}
.show{display:block;}<!-- block表示該元素顯示為一個(gè)塊級(jí)元素,單獨(dú)占一行-->
.hide{display:none;}<!--none表示該元素不顯示,并且不在網(wǎng)頁(yè)上占位-->
</style>
<script type="text/javascript">
window.onload=function(){
?? ?var oTitle=document.getElementById("title");
?? ?var aLi=document.getElementsByName("li");
?? ?var oTab=document.getElementById("tab");
?? ?var aDiv=document.getElementsByName("div");
?? ?for(var i=0;i<aLi.length;i++){
?? ??? ?aLi[i].index=i;
?? ??? ?aLi[i].onmouseover=function(){
?? ??? ??? ?for(var i=0;i<aLi.length;i++){
?? ??? ??? ??? ?aLi[i].className="";
?? ??? ??? ??? ?}
?? ??? ??? ??? ?this.className="active";
?? ??? ??? ??? ?for(var j=0;j<aDiv.length;j++){
?? ??? ??? ??? ??? ?aDiv[i].className="hide";
?? ??? ??? ??? ??? ?}
?? ??? ??? ?aDiv[this.index].className="show";
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>
</head>
<body>
<div id="tab">
?? ?<ul id="title">
?? ??? ?<li class="active">房產(chǎn)</li><li>家居</li><li>二手房</li>
??? </ul>
??? <div>
?????? ??? ?<ul>
?????????? ??? ?<li><a href="javascript:;">275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居</a></li>
??????????????? <li><a href="javascript:;">200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</a></li>
??????????????? <li><a href="javascript:;">北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</a></li>
??????????????? <li><a href="javascript:;">京樓盤直降5000 中信府 公園樓王現(xiàn)房</a></li>
??????????? </ul>
???? </div>
????? <div class="hide">
?????? ??? ?<ul>
?????????? ??? ?<li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窩</a></li>
??????????????? <li><a href="javascript:;">經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</a></li>
??????????????? <li><a href="javascript:;">新中式的酷色溫情 66平撞色活潑家居</a></li>
??????????????? <li><a href="javascript:;">瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</a></li>
??????????? </ul>
????? </div>
????? <div class="hide">
?????? ??? ?<ul>
?????????? ??? ?<li><a href="javascript:;">通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</a></li>
??????????????? <li><a href="javascript:;">西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</a></li>
??????????????? <li><a href="javascript:;">黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!</a></li>
??????????????? <li><a href="javascript:;">獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</a></li>
??????????? </ul>
?????? </div>
</div>
</body>
</html>
2016-04-12
23行 ? var aLi=oTitle.getElementsByName("li");
25行 ?var aDiv=oTab.getElementsByName("div");
其他的還要再看看