<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "微软雅黑", "arial", " sans-serif";
z-index: 2;
}
#ul {
/*border: 1px red solid;*/
list-style: none;
260px;
height: 30px;
margin-left: 10px;
}
#ul li {
display: inline-block;
border: 2px solid #ccc;
border-bottom: none;
60px;
height: 25px;
text-align: center;
cursor: pointer;
background: #fff;
}
#ul li.on {
border-top: 2px solid saddlebrown;
border-bottom: 2px solid #fff;
}
#div div {
border: 1px solid blue;
border-top: none;
276px;
height: 125px;
margin-top: -5px;
padding: 6px;
border-top: 2px saddlebrown solid
}
.hide {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById("div")
var oUl = document.getElementById("ul")
var aLi = oUl.getElementsByTagName("li");
var aDiv = oDiv.getElementsByTagName("div"); //oTabs.get...是为了定义className作用对象为id为tabs下的所有文本div
for (var i = 0; i < aLi.length; i++) { //获取所有i编号的元素
aLi[i].index = i; //定义一个index属性对li进行编号
aLi[i].onclick = function () { //再注册一个点击事件，当点击的时候所有标签都恢复最初状态
for (var n = 0; n < aLi.length; n++) { //这步是相对于未被点击部分的样式
aLi[n].className = "";
aDiv[n].className = "hide";
}
this.className = "on"; //再对点击事件添加相应的属性
aDiv[this.index].className = ""; //通过之前的index编号绑定的指定div
}
}
}
</script>
</head>
<body>
<div id="div">
<ul id="ul">
<li class="on">房产</li> <li>家居</li> <li>二手房</li> </ul> <div> 275万购昌平邻铁三居 总价20万买一居<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房<br> </div> <div class="hide"> 40平出租屋大改造 美少女的混搭小窝<br> 经典清新简欧爱家 90平老房焕发新生<br> 新中式的酷色温情 66平撞色活泼家居<br> 瓷砖就像选好老婆 卫生间烟道的设计<br> </div> <div class="hide"> 通州豪华3居260万 二环稀缺2居250w甩<br> 西3环通透2居290万 130万2居限量抢购<br> 黄城根小学学区仅260万 121平70万抛!<br> 独家别墅280万 苏州桥2居优惠价248万<br> </div></div></body></html>