为什么动态的实现不了-慕课网

为什么动态的实现不了

来源：10-1 编程挑战

慕田峪6997291

2017-03-14 21:08

<!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>