現在的效果:代碼如下:<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/
?????*{?margin:0px;?padding:0px;?font:15px?normal;?font-family:微軟雅黑;}???
?????.hide{display:none;}
?????#Tab{width:315px;height:165px;margin:50px?auto;}
?????#Tab?ul?li.on{border-top:2px?solid?#904747;}
?????#Tab?ul{list-style:none}
?????#Tab?li{display:inline-block;float:left;border:1px?solid?#D1D1D1;border-bottom:none;width:60px;height:30px;line-height:30px;text-align:center;margin:0?5px;cursor:pointer}
?????.normal{width:315px;height:130px;border:1px?solid?#377EFB;border-top:2px?solid?#904747;padding:10px;}
?????
?????.normal{clear:both;}
????</style>
????<script?type="text/javascript">
?????????
????//?JS實現選項卡切換
????window.onload=function(){
?????var?li=document.getElementsByTagName("li");
?????var?aTab=document.getElementById("Tab");
?????var?div=aTab.getElementsByTagName("div");
?????for(var?i=0;i<li.length;i++){
?????li[i].index?=?i;
?????li[i].onclick=function(){
?????for(var?n=0;n<li.length;n++){
?????div[n].className="hide";
?????li[n].className="";
?????}
?????this.className="on";
?????div[this.index].className="normal";
?????}
?????}
????}
????
????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
<div?id="Tab">
<ul>
??<li>房產</li>
??<li>家居</li>
??<li>二手房</li>
</ul>
<div>
????275萬購昌平鄰鐵三居?總價20萬買一居<br/>
????200萬內購五環三居?140萬安家東三環<br/>
????北京首現零首付樓盤?53萬購東5環50平<br/>
????京樓盤直降5000?中信府?公園樓王現房<br/>
</div>
<div>
?????40平出租屋大改造?美少女的混搭小窩<br/>
?????經典清新簡歐愛家?90平老房煥發新生<br/>
?????新中式的酷色溫情?66平撞色活潑家居<br/>
?????瓷磚就像選好老婆?衛生間煙道的設計<br/>
</div>
<div>
?????通州豪華3居260萬?二環稀缺2居250w甩<br/>
?????西3環通透2居290萬?130萬2居限量搶購<br/>
?????黃城根小學學區僅260萬?121平70萬拋!<br/>
?????獨家別墅280萬?蘇州橋2居優惠價248萬<br/>
</div>
</div>
?
</body>
</html>想要的效果:
怎么使以下圖片上面的三個列表的下面當激活時變成無色,覆蓋下面的線
Sellenite
2016-11-03 12:55:47