为什么添加样式失败-慕课网

为什么添加样式失败

来源：10-1 编程挑战

qq_慕尼黑9165359

2019-02-21 20:58

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="Mystyle.css" rel="stylesheet">
</head>
<body>
    <div class="box">
        <button type="button"  class="btn btn1">房产</button>
        <button type="button"  class="btn">家居</button>
        <button type="button"  class="btn">二手房</button>
        <div class="box2">
            <ul id="text" >

                <li class="active">

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

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

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

 京楼盘直降5000中信府公园楼王现房<br/>

                </li>

                <li>

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

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

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

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

                </li>

                <li>

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

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

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

 独家别墅280万 苏州桥2居优惠价248万<br/>

                </li>

            </ul>
        </div>
    </div>

    <script src="MyJs.js">
    </script>
</body>
</html>
.box{
    width: 400px;
    height: 250px;

}
.btn{
    background: white;
    width: 80px;
    height: 40px;
    position:relative;
    outline: none;
    border:1px solid #DCDCDC;
    border-bottom:none;
    z-index: 1;
    margin-left: 20px;
}
.btn1{
    border-top:solid black;
    z-index: 3;
}
.box2{
    width: 350px;
    height: 150px;
    margin-top: -4px;
    border-top: solid black;
    border-bottom: solid blue;
    border-left: solid blue;
    border-right: solid blue;
    position:relative;
    z-index: 2;
}
#text{
    list-style-type: none;
}
li{
    font-size: 12px;
    display: none;
}
.active{
    display: inline;
}

window.onload=function(){
    var btn=document.getElementsByTagName("button");
    var div=document.getElementById("text");

    for (var i=0;i<btn.length;i++){
        btn[i].index=i;
        btn[i].onclick=function () {


            for (var i = 0; i < btn.length; i++) {
                btn[i].className = "btn";

            }
            this.className="btn btn1";
            for (var i = 0; i <div.length ; i++) {
                div[i].className="";
            }
            div[this.index].className="active";
        }

    }
}

写回答关注