<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{
margin:0px;
padding:0px;
}
li{
list-style:none;
}
#ul1{
list-style:none;
display:block;
height:30px;
}
#ul1 li{
display:inline-block;
height:30px;
width:50px;
text-align:center;
line-height:30px;
margin:5px 20px;
border:1px solid #000;
}
#div1,#div2,#div3{
margin:5px 20px ;
width:400px;
background:#f00;
border:2px solid #000;
}
#div2,#div3{
display:none;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
div2.display="none";
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div>
<ul id = "ul1">
<li>房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div id="div1">
<ul>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
</ul>
</div>
<div id="div2">
<ul>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
</ul>
</div>
<div id="div3">
<ul>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="">275万购昌平邻铁三居 总价20万买一居</a></li>
</ul>
</div>
</div>
</body>
</html>
