<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
????????*{
???????????margin:0;
???????????padding:0;
??font:12px?normal?"microsoft?yahei";
????????}
????????.changeTab{
????????????width:290px;
????????????height:150px;
????????????margin:20px;
????????}
????????ul{
height:30px;
line-height:30px;
????????????list-style:none;
border-bottom:2px?saddlebrown?solid;
????????}
????????li{
????????????width:60px;
????????????height:28px;
????????????line-height:28px;
margin:0?3px;
????????????text-align:center;
????????????float:left;
border:1px?solid?#aaa;
cursor:pointer;
background:#fff;
border-bottom:none;
????????}
????????.changeTab?div{
????????????height:120px;
????????????line-height:25px;
????????????border:1px?solid?#336699;
????????????border-top:none;padding:5px;
????????????}
.changeTab?ul?li.on{border-top:2px?solid?saddlebrown;border-bottom:?2px?solid?#fff;}
.hide{display:?none;}
????</style>
????<script?type="text/javascript">
?????????
????//?JS實(shí)現(xiàn)選項(xiàng)卡切換
window.onload?=?function()?{
var?oTab?=?document.getElementById("tabs");
????????var?oUl?=?oTab.getElementsByTagName("ul")[0];
????????var?oLis?=?oUl.getElementsByTagName("li");
????????var?oDivs=?oTab.getElementsByTagName("div");
for?(var?i?=?0;i<oLis.length;i++){
oLis[i].index?=?i;
oLis[i].onclick?=?function()?{
for?(var?j?=?0;j<oLis.length;j++){
oLis[j].className?=?"";
oDivs[j].className?=?"hide";
}
this.className?=?"on";
oDivs[this.index].className?=?"";
}
}
}
????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
<div>
????<ul>
????????<li>房產(chǎn)</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
<div>
????????275萬購昌平鄰鐵三居?總價(jià)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>
????????40平出租屋大改造?美少女的混搭小窩<br>
????????經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生<br>
????????新中式的酷色溫情?66平撞色活潑家居<br>
????????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)<br>
????</div>
????<div>
????????通州豪華3居260萬?二環(huán)稀缺2居250w甩<br>
????????西3環(huán)通透2居290萬?130萬2居限量搶購<br>
????????黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!<br>
????????獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價(jià)248萬<br>
????</div>
?</div>
</body>
</html>
2016-05-24
沒有id為tabs的元素，給下面加粗的標(biāo)簽如下加上id="tabs"就好了
<div id="tabs">
? ?<ul>
? ? ? ?<li>房產(chǎn)</li>
? ? ? ?<li>家居</li>
? ? ? ?<li>二手房</li>
? ?</ul>
? ?<div>
? ? ? ?275萬購昌平鄰鐵三居 總價(jià)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>
? ? ? ?40平出租屋大改造 美少女的混搭小窩<br>
? ? ? ?經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br>
? ? ? ?新中式的酷色溫情 66平撞色活潑家居<br>
? ? ? ?瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)<br>
? ?</div>
? ?<div>
? ? ? ?通州豪華3居260萬 二環(huán)稀缺2居250w甩<br>
? ? ? ?西3環(huán)通透2居290萬 130萬2居限量搶購<br>
? ? ? ?黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!<br>
? ? ? ?獨(dú)家別墅280萬 蘇州橋2居優(yōu)惠價(jià)248萬<br>
? ?</div>
</div>