<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無(wú)標(biāo)題文檔</title>
</head>
<style?type="text/css">
*{padding:0;?margin:0;?font:normal?14px?"微軟雅黑";?
color:#000000;}
ul{list-style-type:?none;}
a{?text-decoration:none;}
#tab{width:275px;?height:190px;?margin:20px?auto;}
#ul1{border-bottom:?2px?solid?#8B4513;height:?32px;}
#ul1?li{display:?inline-block;width:?60px;line-height:?30px;text-align:?center;
????????border:?1px?solid?#999;border-bottom:?none;margin-left:?5px;}
?#ul1?li:hover{cursor:?pointer;}??
?#ul1?li.active{border-top:2px?solid?#8B4513;border-bottom:2px?solid?#FFFFFF;}
??#tab?div{border:?1px?solid?#7396B8;border-top:?none;}
?????#tab?div?li{height:?30px;line-height:?30px;text-indent:?8px;}
.hide{display:?none;}
</style>
<script?type="text/javascript">?????
????window.onload=function(){
????????var?oTab?=?document.getElementById("tab")
????????var?li?=?ul1.getElementsById("li");
????????var?div?=?oTab.getElementsByTagName("div");//oTabs.get...是為了定義className作用對(duì)象為id為tabs下的所有文本div
????????
????????for(var?i=0;i<li.length;i++){//獲取所有i編號(hào)的元素
????????????li[i].index?=?i;??//定義一個(gè)index屬性對(duì)li進(jìn)行編號(hào)
????????????li[i].onclick?=?function(){//再注冊(cè)一個(gè)點(diǎn)擊事件，當(dāng)點(diǎn)擊的時(shí)候所有標(biāo)簽都恢復(fù)最初狀態(tài)
????????????for(var?n=0;n<li.length;n++){//這步是相對(duì)于未被點(diǎn)擊部分的樣式
????????????????li[n].className?=?"";
????????????????div[n].className?=?"hide";
????????????}
????????????this.className?=?"active";//再對(duì)點(diǎn)擊事件添加相應(yīng)的屬性
????????????div[this.index].className?=?"";//通過之前的index編號(hào)綁定的指定div
????????????}
????????}
????}
????
????</script>
?
<body>
<div?id="tab">
<ul?id="ul1">
<li?class="active">房產(chǎn)</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
<ul>
<li><a?href="#">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
<li><a?href="#">200萬(wàn)內(nèi)購(gòu)五環(huán)三居?140萬(wàn)安家東三環(huán)</a></li>
<li><a?href="#">北京首現(xiàn)零首付樓盤?53萬(wàn)購(gòu)東5環(huán)50平</a></li>
<li><a?href="#">京樓盤直降5000?中信府?公園樓王現(xiàn)房</a></li>
</ul>
</div>
<div?class="hide">
<ul?>
<li><a?href="#">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
<li><a?href="#">200萬(wàn)內(nèi)購(gòu)五環(huán)三居?140萬(wàn)安家東三環(huán)</a></li>
<li><a?href="#">北京首現(xiàn)零首付樓盤?53萬(wàn)購(gòu)東5環(huán)50平</a></li>
<li><a?href="#">京樓盤直降5000?中信府?公園樓王現(xiàn)房</a></li>
</ul></div>
<div?class="hide">
<ul?>
<li><a?href="#">275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</a></li>
<li><a?href="#">200萬(wàn)內(nèi)購(gòu)五環(huán)三居?140萬(wàn)安家東三環(huán)</a></li>
<li><a?href="#">北京首現(xiàn)零首付樓盤?53萬(wàn)購(gòu)東5環(huán)50平</a></li>
<li><a?href="#">京樓盤直降5000?中信府?公園樓王現(xiàn)房</a></li>
</ul>
</div>
</div>
</body>
</html>
添加回答
舉報(bào)
0/150
提交
取消