<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* #id选择器 .类选择器 空白 后代选择器 */
/* CSS样式制作 */
*{padding:0px; margin:0px;}
/* a{ text-decoration:none; color:black;}
a:hover{text-decoration:none; color:#336699;} */
/* 整个div的设置 h= li22 + content200 +2+1+5+2+1 */
#tabbox{500px;height:174px; padding:5px;margin:0px;}
/* #tabbox #tabs{list-style:none; display:;height:30px;line-height:30px; border-bottom:2px #C88 solid;} */
/* tab标签页背景色 光标类型：小手 浮动：向左 li样式：前面无点 li行高度: 行间距 */
#nav li{height:22px;padding: 0px 10px 0px 10px;border:1px solid #d89774; margin:0px 0px 0px 40px; background:#ffffff;cursor:pointer;float:left;list-style:none ; line-height:26px; }
/* 选择li的class为on的li 即当前选中的tab*/
#tabbox ul li.on{ border-top:2px solid #08111a;border-bottom:3px solid #ffffff;}
/* 文字框的设置 */
#content {340px;height:150px;padding:2px 0px;border:2px solid #08111a;margin:24px 10px; line-height:20px; list-style:none ;}
/* hide类全部隐藏 */
.hide{display:none;}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function(){
var links = document.getElementById("nav").childNodes;//ul->li
var tab_conbox = document.getElementById("content").childNodes;//内容 ul->li
for(var i=0;i<links.length;i++){
if(links[i] instanceof Element){//排除空白节点
links[i].index = i;
links[i].onclick = function(){
for(var j = 0; j < links.length; j++){
links[j].className="off";
tab_conbox[j].className = "hide";
}
this.className = "on";
tab_conbox[this.index].className = "show";
}
}
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tabbox">
<ul id="nav" >
<li class="off">房产</a></li>
<li class="off">家园</a></li>
<li class="off">二手房</a></li>
</ul>
<ul id="content">
<li class="hide">
<a href = "#">275万购昌平邻铁三居 总价20万买一居</a><br/>
<a href = "#">200万内购五环三居 140万安家东三环</a><br/>
<a href = "#">北京首现零首付楼盘 53万购东5环50平</a><br/>
<a href = "#">京楼盘直降5000 中信府 公园楼王现房</a><br/>
</li>
<li class="hide">
<a href = "#">40平出租屋大改造 美少女的混搭小窝</a><br/>
<a href = "#">经典清新简欧爱家 90平老房焕发新生</a><br/>
<a href = "#">新中式的酷色温情 66平撞色活泼家居</a><br/>
<a href = "#">瓷砖就像选好老婆 卫生间烟道的设计</a><br/>
</li>
<li class="hide">
<a href = "#">通州豪华3居260万 二环稀缺2居250w甩</a><br/>
<a href = "#">西3环通透2居290万 130万2居限量抢购</a><br/>
<a href = "#">黄城根小学学区仅260万 121平70万抛!</a><br/>
<a href = "#">独家别墅280万 苏州桥2居优惠价248万</a><br/>
</li>
</ul>
</div>
<p>
其他文字
</p>
</body>
</html>