                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

為什么動(dòng)態(tài)的實(shí)現(xiàn)不了

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實(shí)踐題 - 選項(xiàng)卡</title>
??? <style type="text/css">
???? /* CSS樣式制作 */?
????? *{margin:0;padding:0;list-style:none; fontsize:12px;line-height: 28px;}
??? #bar{
???????? width:300px;
???????? height:200px;
???????
???????? margin:10px;
????? }
??? #bar ul{
??????? height:30px;
??????? display:block;
??????? border-bottom:2px solid blue;
??? }
??? #bar ul li{
???????? width:50px;
???????? height:28px;
???????? padding:1px 5px;
???????? border:1px solid #ccc;
???????? text-align: center;
???????? float:left;
??????? margin-left: 10px;
??????? cursor:pointer;
??????? border-bottom: none;
??????? display: inline-block;
???? }
???? #bar li.bar1{
??????? margin-left: 0px;
??????
??????? border-bottom:2px solid #fff;
???? }
???? #bar div{
????????? width:288px;
????????? height:150px;
????????? padding:5px;
????????? border:1px solid #369;
????????? clear:both;
????????? border-top:none;
???? }
??? .hiddle{display:none;}
??? </style>
??? <script type="text/javascript">
????????
??? // JS實(shí)現(xiàn)選項(xiàng)卡切換
??? window.onload=function(){
??????? var oTab=document.getElementById("bar");
??????? var oUl=oTab.getElementByTagName("ul")[0];
??????? var oLis=oUl.getElementByTagName("li");
??????? var oDivs=oTab.getElementByTagName("div");
??????? for(var i=0,len=oLis.length;i<len;i++)
??????? {
??????????? oLis[i].index=i;
??????????? oLis[i].onclick=function(){
??????????????? for(var n=0;n<len;n++)
??????????????? {
??????????????????? oLis[n].className="";
??????????????????? oDivs[n].className="hiddle";
??????????????? }
??????????????? this.className="bar1";
??????????????? oDivs[this,index].className="";
??????????? }
??????? }
??? }
???
??? </script>
</head>
<body>

<div id="bar">
??? <ul>
??????? <li>房產(chǎn)</li>
??????? <li>家居</li>
??????? <li>二手房</li>
??? </ul>
??? <div>?
??????? 275萬(wàn)購(gòu)昌平林鐵三居總價(jià)20萬(wàn)買一居<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)東五環(huán)50平<br/>
??????? 京樓盤(pán)枝江5000中信府公園樓王現(xiàn)房<br/>?
??? </div>
??? <div>
???????
??????? 40平出租屋大改造美少女的混搭小窩<br/>
??????? 經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生<br/>
??????? 新中式的酷色溫情 66平撞色活潑家居<br/>
??????? 瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計(jì)<br/>??
??? </div>
??? <div>
???
??????? 通州豪華三居260萬(wàn) 二環(huán)稀缺2居250w甩<br/>
??????? 西3環(huán)通透二居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)<br/>
??????? 皇城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋<br/>
??????? 度假別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)<br/>??
??? </div>
</div>
</body>
</html>