<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
*{
margin:0px;padding: 0px;font: red;
}
ul{
list-style-type: none;
}
#tab-list{
width:280px;height: 130px;color: red;margin: 20px auto;
}
.ul1{
border-bottom: 2px solid #8B4513;height: 30px;
}
.ul1 li{
display:inline-block ;width: 70px;line-height: 30px;text-align: center;
border: 1px solid black; border-bottom:none;margin-left: 5px;
}
.ul1 li:hover{cursor: pointer;}
.ul1 .li1{
border-top:1px solid #8B4513;border-bottom: 2px solid #ffffff;
}
#tab-list div{
border: 1px solid blue;border-top: none;
}
#tab-list div li{
height: 30px;line-height: 30px;text-indent: 5px;
}
.kuang{
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oTab = document.getElementById("tab-list")
var li = oTab.getElementsByTagName("li");
var div = oTab.getElementsByTagName("div");//oTabs.get...是为了定义className作用对象为id为tabs下的所有文本div
for(var i=0;i<li.length;i++){//获取所有i编号的元素
li[i].index = i; //定义一个index属性对li进行编号
li[i].onclick = function(){//再注册一个点击事件，当点击的时候所有标签都恢复最初状态
for(var n=0;n<li.length;n++){//这步是相对于未被点击部分的样式
li[n].className = "";
div[n].className = "kuang";
}
this.className = "li1";//再对点击事件添加相应的属性
div[this.index].className = "";//通过之前的index编号绑定的指定div
}
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
<ul>
<li>房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
<ul>
<li>275万购昌平邻铁三居 总价20万买一居</li>
<li>200万内购五环三居 140万安家东三环</li>
<li>北京首现零首付楼盘 53万购东5环50平</li>
<li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
</div>
<div>
<ul>
<li>275万购昌平邻铁三居 总价20万买一居</li>
<li>200万内购五环三居 140万安家东三环</li>
<li>北京首现零首付楼盘 53万购东5环50平</li>
<li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
</div>
<div>
<ul>
<li>275万购昌平邻铁三居 总价20万买一居</li>
<li>200万内购五环三居 140万安家东三环</li>
<li>北京首现零首付楼盘 53万购东5环50平</li>
<li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
</div>
</div>
</body>
</html>
没有提前定义