為什么切換之后li的下邊框沒辦法清除
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我們互動下</title>
<style type="text/css">
*{margin:0;padding: 0;font:normal 12px "微軟雅黑";}
#tabs{height:150px;width:290px;margin:50px;padding:5px;}
#tabs ul{display: block;list-style:none;height: 30px;}
#tabs ul li{display: inline-block;float:left;line-height: 28px;height:28px;width:60px;text-align: center;border: 1px solid #aaa;margin:0 3px;cursor:pointer;border-bottom: none;}
#tabs ul li.on{border-top:2px solid #800;border-bottom: 2px solid #800;}
#tabs div{border: 1px solid #aaa;border-top: 2px solid #800;height:120px;line-height: 25px;text-align: center;padding:5px;}
.hide{display: none;}
</style>
<script type="text/javascript">
window.onload=function(){
var main=document.getElementById("tabs");
var LI=document.getElementsByTagName("li");
var DIV=main.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";
}
this.className="on";
DIV[this.index].className="";
}
}
}
</script>
</head>
<body>
<div id="tabs">
? ? <ul>
? ? ? ? <li class="on">房地產(chǎn)</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div>
? ? 275萬購昌平鄰鐵三居 總價20萬買一居<br/>
? ? 200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)<br/>
? ? 北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平<br/>
? ? 京樓盤直降5000 中信府 公園樓王現(xiàn)房<br/>
? ? </div>
? ? <div class="hide">
? ? 40平出租屋大改造 美少女的混搭小窩<br/>
? ? ?經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br/>
? ? ?新中式的酷色溫情 66平撞色活潑家居<br/>
? ? ?瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計<br/>
? ? </div>
? ? <div class="hide">
? ? 通州豪華3居260萬 二環(huán)稀缺2居250w甩<br/>
? ? ?西3環(huán)通透2居290萬 130萬2居限量搶購<br/>
? ? ?黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!<br/>
? ? ?獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬<br/>
?
? ? </div>
</div>
</body>
</html>
2016-11-29
請注意,那不是li的下邊框,而是div的上邊框,也就是
border-top: 2px solid #800這個
你的js并沒有對這個樣式進行變換,所以并不會對這個產(chǎn)生影響
2016-11-29
添加元素none
2016-11-29
應(yīng)該是樣式?jīng)]設(shè)置對?