<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{padding:0;margin:0;list-style:none;font-size:13px;text-decoration:none;color:#333;}
#all{width:300px;}
#ul1{border-bottom:2px solid #8B4513;height:32px;padding-left:10px;}
#ul1 li{float:left;margin-right:10px;border:1px solid #B3B3AE;width:70px;line-height:30px;text-align:center;border-bottom:none;cursor:pointer;}
#ul1 li.on{border-top:2px solid #8B4513;border-bottom:2px solid #fff;}
#all div{clear:both;border:1px solid #7295B8;height:100px;border-top:0;}
#all div li{padding:5px 0 0 10px;}
.hide{display:none;}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload=function(){
var a=document.getElementById("all");
var b=a.getElementById('ul1');
var c=b.getElementsByTagName('li');
var d=a.getElementsByTagName('div');
for(var i=0;len=c.length;i<len;i++){
c[i].index=i;
c[i].onmouseover=function(){
for(var n=0;n<len;n++){
c[n].className='';
d[n].className='hide';
}
this.className='on';
d[this.index].className='';
}
};
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id='all'>
<ul id='ul1'>
<li>房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
<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>
<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>
<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>