<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
??*{margin:0;?padding:0;}
??#all{font-family:SimHei;?width:350px;}
??ul?li{
??????list-style:none;
??}
??#conTrol?li{
???????float:left;
???????width:80px;
???????height:29px;
???????margin:0?4px;
???????cursor:pointer;
???????border:1px?solid??#ccc;
???????border-bottom:none;
???????text-align:center;
???????line-height:26px;
???????}
????p{margin-top:8px;}???
????#container{
????????width:350px;
????????height:150px;
????????border:1px?solid?blue;
????????border-top:none;
????????float:left;
????}?????
????#conTrol?.work{
??????????position:relative;
??????????margin-bottom:-1px;
??????????border-top:1px?solid?red;
??????????height:30px;
??????????background:white;
????}
????.hide{display:none;}
????#conTrol{
????????height:30px;
????????width:352px;
????????margin-bottom:-1px;
????????border-bottom:1px?solid?red;
????}
????</style>
????<script?type="text/javascript">
????window.onload?=?function(){
??var?conTrol?=?document.getElementById("conTrol");
????var?conTrol_li?=?conTrol.getElementsByTagName("li");
??var?container?=?document.getElementById("container");
????var?container_li?=?container.getElementsByTagName("div");
????var?len?=?conTrol.length;
????var?i=0;
????
????for(i=0;?i<len;?i++){
??????conTrol_li[i].index?=?i;
??????conTrol_li[i].onclick?=?function(){
??????????for(i=0;?i<len;?i++){
??????????????container_li[i].className?=?'hide';
????????????????conTrol_li[i].className?=?'';
????????????}
????????????container_li[this.index].className?=?'';
????????????conTrol_li[this.index].className?=?'work';
????????}
????}
????
}
????
????
????</script>
?
</head>
<body>
<div?id="all">
<ul?id="conTrol">
????<li>房產</li>
????<li>家居</li>
????<li>二手房</li>
</ul>
<div?id="container">
????<div>?<p>275萬購昌平鄰鐵三居?總價20萬買一居</p>
????<p>200萬內購五環(huán)三居?140萬安家東三環(huán)</p>
????<p>北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平</p>
????<p>京樓盤直降5000?中信府?公園樓王現(xiàn)房</p></div>
????<div><p>40平出租屋大改造?美少女的混搭小窩<p>
?????<p>經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生</p>
?????<p>新中式的酷色溫情?66平撞色活潑家居</p>
?????<p>瓷磚就像選好老婆?衛(wèi)生間煙道的設計</p></div>
?????<div><p>通州豪華3居260萬?二環(huán)稀缺2居250w甩<p>
?????<p>西3環(huán)通透2居290萬?130萬2居限量搶購</p>
?????<p>黃城根小學學區(qū)僅260萬?121平70萬拋!</p>
?????<p>獨家別墅280萬?蘇州橋2居優(yōu)惠價248萬</p></div>
</div>
</div>?
</body>
</html>
2017-01-26
第52行?
var len = conTrol_li.length;