<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
body{font-size:12px}
ul,li{padding:0; margin:0; list-style:none;}
.hidden{display:none}
#tabs{width:360px;}
ul{height:32px; line-height:30px;border-bottom:2px #660000 solid; width:300px;}
ul li{width:60px;height:30px; display:block;float:left; text-align:center;
margin:0 8px 0 5px; border:1px #CCCCCC solid; cursor:pointer;font-weight:bold;
}
ul li.on{border-bottom:2px solid #FFF;border-top:2px #660000 solid}
div{border:1px blue solid;border-top:1px #FFF solid;width:300px;}
div p{padding-left:10px;}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function(){
var tabs=document.getElementById("tabs");
var oul=document.getElementsByTagName("ul")[0];
var oli=document.getElementsByTagName("li");
var odiv=document.getElementsByTagName("div");
for(var i=0;i<oli.length;i++){
oli[i].index=i;
oli[i].onclick=function(){
for(var n=0;n<oli.length;n++){
oli[n].className="";
odiv[n].className="hidden";
}
this.className="on";
odiv[this.index].className="";
}
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<ul>
<li>房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div id="house">
<p>275万购昌平邻铁三居 总价20万买一居</p>
<p>200万内购五环三居 140万安家东三环</p>
<p>北京首现零首付楼盘 53万购东5环50平</p>
<p>京楼盘直降5000 中信府 公园楼王现房</p>
</div>
<div id="furniture">
<p>40平出租屋大改造 美少女的混搭小窝</p>
<P>经典清新简欧爱家 90平老房焕发新生</P>
<P>新中式的酷色温情 66平撞色活泼家居</P>
<P>瓷砖就像选好老婆 卫生间烟道的设计</P>
</div>
<div id="secondHouse">
<P>通州豪华3居260万 二环稀缺2居250w甩</P>
<P>西3环通透2居290万 130万2居限量抢购</P>
<P>黄城根小学学区仅260万 121平70万抛!</P>
<P>独家别墅280万 苏州桥2居优惠价248万</P>
</div>
</body>
</html>
bobo_weiqi
2014-09-30
举报
0/150
提交
取消
