                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

為什么動態的實現不了

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實踐題 - 選項卡</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實現選項卡切換
??? 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>房產</li>
??????? <li>家居</li>
??????? <li>二手房</li>
??? </ul>
??? <div>?
??????? 275萬購昌平林鐵三居總價20萬買一居<br/>
??????? 200萬內購五環三居 140萬安家東三環<br/>
??????? 北京首現零首付樓盤 53萬購東五環50平<br/>
??????? 京樓盤枝江5000中信府公園樓王現房<br/>?
??? </div>
??? <div>
???????
??????? 40平出租屋大改造美少女的混搭小窩<br/>
??????? 經典清新簡歐愛家 90平老房煥發新生<br/>
??????? 新中式的酷色溫情 66平撞色活潑家居<br/>
??????? 瓷磚就像選好老婆衛生間煙道的設計<br/>??
??? </div>
??? <div>
???
??????? 通州豪華三居260萬二環稀缺2居250w甩<br/>
??????? 西3環通透二居290萬 130萬2居限量搶購<br/>
??????? 皇城根小學學區僅260萬 121平70萬拋<br/>
??????? 度假別墅280萬蘇州橋2居優惠價248萬<br/>??
??? </div>
</div>
</body>
</html>