为什么不能实现切换的效果-慕课网

为什么不能实现切换的效果

来源：10-1 编程挑战

qq_小兔子的狐狸宝宝_0

2018-05-27 18:00

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
 /* CSS样式制作 */
 #tabs{height: 150px;width: 300px;padding: 5px;margin: 20px}
        body,ul,li,div{margin: 0px;padding: 0px}
        #tabs ul{list-style:none;display: block;border-bottom: 2px solid saddlebrown;height:30px;line-height:30px;}
        #tabs ul li{float:left;cursor: pointer; list-style:none;height:28px;line-height:28px;margin:0px 6px;border:1px solid ;display:inline-block;width: 60px;text-align: center;border-bottom: none}
        #tabs ul li.show{border-bottom: 2px solid #FFFFFF;border-top: solid 2px saddlebrown}
        #tabs div{height: 120px; border: solid 1px;border-top: none;padding: 5px;line-height: 30px;}
        .hide{display: none}

    </style>
    <script type="text/javascript">

 // JS实现选项卡切换
 window.onload=function () {
            var getTabs = document.getElementById("tabs");
 var getUl = getTabs.document.getElementsByTagName("ul")[0];
 var getLis = getUl.document.getElementsByTagName("li");
 var getDivs = getTabs.document.getElementsByTagName("div");

 for(var i = 0;i<getLis.length;i++)
            {
                getLis[i].index = i;
 getLis[i].onmouseover=function ( ) {
                    for(var n= 0;n<getLis.length;n++){
                        getLis[n].className = "";
 getDivs[n].className = "hide";
 }
                    this.className="show";
 getDivs[this.index].className=" ";
 }
            }
        }
    </script>

</head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
    <ul >
        <li class="show">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
 275万购昌平邻铁三居 总价20万买一居<br>
 200万内购五环三居 140万安家东三环<br>
 北京首现零首付楼盘 53万购东5环50平<br>
 京楼盘直降5000 中信府 公园楼王现房<br>
    </div>
    <div class="hide">
 40平出租屋大改造 美少女的混搭小窝<br>
 经典清新简欧爱家 90平老房焕发新生<br>
 新中式的酷色温情 66平撞色活泼家居<br>
 瓷砖就像选好老婆 卫生间烟道的设计<br>
    </div>
    <div class="hide">
 通州豪华3居260万 二环稀缺2居250w甩<br>
 西3环通透2居290万 130万2居限量抢购<br>
 黄城根小学学区仅260万 121平70万抛!<br>
 独家别墅280万 苏州桥2居优惠价248万<br>
    </div>
</div>
</body>
</html>

写回答关注