写了大半天，中间碰到几个问题，好在最后搞出来了，晒一晒
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
body{font-size:100%;font-family:"Microsoft Yahei";}
body>div{margin:10px;padding:16px;height:190px;width:340px;}
.top{margin:0;padding:0;height:20%;}
.content{margin:0;padding:5px;height:65%;border:1px solid #069;border-top:2px solid #630; }
.top>div{height:36px; line-height:38px; width:70px;margin:0 5px;text-align:center;border:1px #CCC solid;border-bottom:none; float:left;}
.content>div.off{display:none}
.top>div.on{border-top:2px solid #630;border-bottom:2px solid #fff;}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload=function(){
var div=document.getElementsByClassName('top')[0];
var menu=div.getElementsByTagName('div');
var content=document.getElementsByClassName('content')[0];
var txt=content.getElementsByTagName('div');
function click(x)
{
menu[x].onclick=function(){
for(var i=0;i<txt.length;i++)
{
txt[i].className='off';
menu[i].className='';
}
txt[x].className='';
menu[x].className='on'}
}
for(var i=0;i<menu.length;i++)
{ click(i); }
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div>
<div class="top">
<div class="on">房产</div>
<div>家居</div>
<div>二手房</div>
</div>
<div class="content">
<div >275万购昌平邻铁三居 总价20万买一居<br/>200万内购五环三居 140万安家东三环<br/>北京首现零首付楼盘 53万购东5环50平<br/>京楼盘直降5000 中信府 公园楼王现房</div>
<div class="off">40平出租屋大改造 美少女的混搭小窝<br/>经典清新简欧爱家 90平老房焕发新生<br/>新中式的酷色温情 66平撞色活泼家居<br/>瓷砖就像选好老婆 卫生间烟道的设计</div>
<div class="off">通州豪华3居260万 二环稀缺2居250w甩<br/>西3环通透2居290万 130万2居限量抢购<br/>黄城根小学学区仅260万 121平70万抛!<br/>独家别墅280万 苏州桥2居优惠价248万</div>
</div>
</div>
</body>
</html>
