<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
#tab {
border: none;
}
#tab h3 {
border: 1px solid #aaa;
border-bottom: none;
margin: 2px 1px 0px 1px;
padding:0px;
font-size:14px;
float:left;//让<li>元素都在同一行显示，都靠左
right:50px;//从右边向左移动5px
width：200px;
height:24px;//<li>元素的高度
line-height:24px;//<li>元素的行高
text-align:center;//让标题的字居中
}
#tab div {
clear:both;//左右两侧不允许有浮动元素
border-bottom:none;
font-size:14px;
padding:20px 0px 0px 20px;
display: none; /*选项卡的效果通过display:[none block]来控制显示与隐藏*/
}
#tab div.content{
font-size:14px;
border:2px solid blue;
border-top:2px solid saddlebrown;
display:block;
}
#tab h3.active{
border-top:2px solid saddlebrown;
border-bottom:2px solid transparent;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function() {
var oTab = document.getElementById("tab");
var aH3 = oTab.getElementsByTagName("h3");
var aDiv = oTab.getElementsByTagName("div");
for (var i = 0; i < aH3.length; i++) {
aH3[i].index = i;
aH3[i].onclick = function() {
for (var i = 0; i < aH3.length; i++) {
aH3[i].className = "";
aDiv[i].style.display = "none";
aDiv[this.index].className = "";//this指的是用户点击的对象
aDiv[this.index].className = "content";
}
aDiv[this.index].style.display = "block";
this.className = "active";
};
}
};
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab">
<h3 class="active">房产</h3>
<h3>家居</h3>
<h3>二手房</h3>
<div class="content">
275万购昌平邻铁三居 总价20万买一居<br>
200万内购五环三居 140万安家东三环<br>
北京首现零首付楼盘 53万购东5环50平<br>
京楼盘直降5000 中信府 公园楼王现房<br>
</div>
<div>
40平出租屋大改造 美少女的混搭小窝<br>
经典清新简欧爱家 90平老房焕发新生<br>
新中式的酷色温情 66平撞色活泼家居<br>
瓷砖就像选好老婆 卫生间烟道的设计<br>
</div>
<div>
通州豪华3居260万 二环稀缺2居250w甩<br>
西3环通透2居290万 130万2居限量抢购<br>
黄城根小学学区仅260万 121平70万抛!<br>
独家别墅280万 苏州桥2居优惠价248万<br>
</div>
</div>
</body>
</html>
你那个h3的下边框设为白色盖在下面div的上边框就是“透明”的效果，自己调整下找到盖住的像素就行
这下行了，谢谢您给的改进的建议，非常详细，感激
或者你可以选择这样：
border-bottom:4px solid #fff;// #tab h3.active
margin: 2px 5px -3px 1px;//#tab h3
padding:2px 10px 5px 10px;//#tab h3
这样就基本和示例差不多了，建议你再去回顾一下CSS课程或者看一下其他的CSS课程，你的样式里边选择器都很冗余，比如你的代码里边只有标题那里用了h3,其他地方都没有，所以就可以直接写成h3{},后面的也是，#tab h3{}适用的是很多地方都用了h3，你要为ID为tab下的元素里边的h3加上独立的样式的话才需要这样写。多去回顾一下可以减少很多无意义的代码量。
border-bottom: 2px solid white;
margin: 2px 10px -2px 0px;
比如你可以把你h3的样式改成这样，但是要想变成要求的那样，你的其他代码还需要调整