                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

為什么添加樣式失敗

<!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">房產(chǎn)</button>
????????<button?type="button"??class="btn">家居</button>
????????<button?type="button"??class="btn">二手房</button>
????????<div?class="box2">
????????????<ul?id="text"?>

????????????????<li?class="active">

?275萬(wàn)購(gòu)昌平鄰鐵三居總價(jià)20萬(wàn)買一居<br/>

?200萬(wàn)內(nèi)購(gòu)五環(huán)三居140萬(wàn)安家東三環(huán)<br/>

?北京首現(xiàn)零首付樓盤53萬(wàn)購(gòu)東5環(huán)50平<br/>

?京樓盤直降5000中信府公園樓王現(xiàn)房<br/>

????????????????</li>

????????????????<li>

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

?經(jīng)典清新簡(jiǎn)歐愛家?90平老房煥發(fā)新生<br/>

?新中式的酷色溫情?66平撞色活潑家居<br/>

?瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)<br/>

????????????????</li>

????????????????<li>

?通州豪華3居260萬(wàn)?二環(huán)稀缺2居250w甩<br/>

?西3環(huán)通透2居290萬(wàn)?130萬(wàn)2居限量搶購(gòu)<br/>

?黃城根小學(xué)學(xué)區(qū)僅260萬(wàn)?121平70萬(wàn)拋!<br/>

?獨(dú)家別墅280萬(wàn)?蘇州橋2居優(yōu)惠價(jià)248萬(wàn)<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";
????????}

????}
}