現(xiàn)在的效果:代碼如下:<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</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實(shí)現(xiàn)選項(xiàng)卡切換
????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頁(yè)面布局?-->
<div?id="Tab">
<ul>
??<li>房產(chǎn)</li>
??<li>家居</li>
??<li>二手房</li>
</ul>
<div>
????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/>
</div>
<div>
?????40平出租屋大改造?美少女的混搭小窩<br/>
?????經(jīng)典清新簡(jiǎn)歐愛(ài)家?90平老房煥發(fā)新生<br/>
?????新中式的酷色溫情?66平撞色活潑家居<br/>
?????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)<br/>
</div>
<div>
?????通州豪華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/>
</div>
</div>
?
</body>
</html>想要的效果:
怎么使以下圖片上面的三個(gè)列表的下面當(dāng)激活時(shí)變成無(wú)色,覆蓋下面的線
Sellenite
2016-11-03 12:55:47