第一种方法：采用的是定位方式，父元素相对定位，设置border-bottom样式，放置标题的li元素绝对定位，位置刚好遮住父容器底部border即可
第二种方法：采用定位方式 ，父元素相对定位给，没有border-botton属性，内容层绝对定位，设置border-top样式，调整距离以及z-index使其在标题下方，被遮住上方border即可
第三种方法：采用背景图片[未测试]
以下是第一种方法的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ Tab特效</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
html{color:#000; overflow-y:auto;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font-size:12px;font-family:"SimSun","宋体","Arial Narrow";}
img{border:none;}
em,strong{font-style:normal;font-weight:normal;}
ul,li,ol{list-style:none;}
a{ color:#000;text-decoration:none;}
a:link{ color:#000; text-decoration:none;}
a:visited{ color:#6c6c6c; text-decoration:none;}
a:hover { color:#1f3e94;text-decoration: none;}
a:active{ color:#C52500; text-decoration:none;}
.contain{ border:1px solid #ccc; width:400px; margin:10px auto;}
.tab_title{ position:relative; height:30px; background-color:#eee; margin-bottom:5px; border-bottom:1px solid #ccc; padding-top:10px;}
.tab_title ul{ height:30px; line-height:30px; position:absolute; left:0; bottom:-3px; z-index:2;}
.tab_title ul li{ height:26px; line-height:26px; margin:0 5px; padding:0 4px; border:1px solid #ccc;float:left;}
.tab_title .selected{ background-color:#fff; border-bottom:1px solid #fff; z-index:2;}
.tab_con{ padding:10px 10px;}
.tab_con div{ display:none;}
.tab_con .tab_con1{ display:block;}
.tab_con ul{ border:none; background:none;}
.tab_con ul li{ border:none; background:none; float:none;}
</style>
</head>
<body>
<div class="contain">
<div class="tab_title"><!--标题-->
<ul>
<li class="selected"><a href="#">标签一</a></li>
<li><a href="#">标签二</a></li>
<li><a href="#">标签三</a></li>
<li><a href="#">标签四</a></li>
</ul>
</div>
<div class="tab_con"><!--内容-->
<div class="tab_con1">这里放什么信息好呢？</div>
<div><img src="img/03.jpg" /></div>
<div>这里放些数字吧4354316584315343613</div>
<div>
<ul>
<li>这是列表看到没？</li>
<li>这是列表看到没？</li>
<li>这是列表看到没？</li>
<li>这是列表看到没？</li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".tab_title ul li").click(function(){
$(this).addClass("selected").siblings().removeClass();
var qaz=$(this).index();
//$(".tab_con div").eq(qaz).css("display","block").siblings().css("display","none")
$(".tab_con div").eq(qaz).show("fast").siblings().hide("fast")
//$(".tab_con div").eq(qaz).addClass("xianshi").siblings().removeClass()
})
});
</script>
</body>
</html>
实现效果
