这个选项卡怎么不能运行呢

weixin_38692998 2017-05-08 10:59:57



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>实践题 - 选项卡</title>

<style type="text/css">

     /* CSS样式制作 */ 

* {margin:0px;padding:0px; font:14px/1.5 arial}

ul,li{list-style:none}

.wrap{width:300px; height:180px;margin:20px auto;}

.hide{display:none}

#tab_t{height:33px; border-bottom:2px solid #FC0}

#tab_t li{float:left;width:80px; height:32px; margin:0 3px; line-height:33px; text-align:center; border:1px solid #999; border-bottom:none; cursor:pointer; background:#ECECEC}

#tab_t .act{position:relative; height:33px; border-top:2px solid #FC0;margin-bottom:-2px; background:#FFF}

#tab_c{ height:145px; border:1px solid #00F; border-top:none}

</style>

<script type="text/javascript">

var tab_t=document.getElementById("tab_t");

var tab_c=document.getElementById("tab_c");

var li=tab_t.getElementsByTagName("li");

var Div=tab_c.getElementsByTagName("div");

for(var i=0;i<li.length;i++){

	li[i].index=i;

	li[i].onclick=function(){

		for(var j=0;j<li.length;j++){

			li[j].className='';

			Div[j].className='hide';

		}

		li[this.index].className='act';

		Div[this.index].className='';

	}

}

</script> 

</head>

<body>

<!-- HTML页面布局 -->

<div class="wrap">

    <ul id="tab_t">

        <li class="act">房产</li>

        <li>家居</li>

        <li>二手房</li> 

    </ul>

    <div id="tab_c">

        <div>275万购昌平邻铁三居 总价20万买一居

            <br/>200万内购五环三居 140万安家东三环<br/>

            北京首现零首付楼盘 53万购东5环50平<br/>

            京楼盘直降5000 中信府 公园楼王现房

        </div>

        <div class="hide">40平出租屋大改造 美少女的混搭小窝<br/>

             经典清新简欧爱家 90平老房焕发新生<br/>

             新中式的酷色温情 66平撞色活泼家居<br/>

             瓷砖就像选好老婆 卫生间烟道的设计

        </div>

        <div class="hide">通州豪华3居260万 二环稀缺2居250w甩<br/>

             西3环通透2居290万 130万2居限量抢购<br/>

             黄城根小学学区仅260万 121平70万抛!<br/>

             独家别墅280万 苏州桥2居优惠价248万

        </div>

    </div>

</div>

</body>

</html>