好的，经过长时间的尝试，我设法做到了。最后我用圆角解决了它tabContent_wrapper。
以下是我所做的简短总结：
- 从每个 tabContent div 中删除 roundedCorners，添加到
tabContent_wrapper
- 将
clearfix类添加到所有tabContentdiv，clearfix在 CSS 代码中定义类
- 添加
PIE.htc到roundedCorners
roundedCorners由于 CSS3PIE 角，添加了一些填充...- 添加位置：相对；
z-index:10;至roundedCorners
- 注释掉
tabContent的position:absolute;
- hid
tabContent_wrapper，因为有一个2px填充，在其中不显示任何内容时看起来很难看
- 删除前面的评论标志
$('.tabContent_wrapper').show();，现在需要；$('.tabContent_wrapper').hide();当我们再次单击活动选项卡时放入（不要让丑陋的空内容显示有边框）
这是完整的代码（使用http://jsbeautifier.org/格式化后）：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Tabs...</title>
<style>
.roundedCorners {
padding:2px;
border-radius:7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
/* New stuffs */
behavior: url(PIE.htc);
position:relative;
z-index:10;
}
.tabHome_wrapper {
margin-bottom:-1px;
}
.tab_wrapper {
position:relative;
height:25px;
margin-left:-1px;
}
.tab_wrapper ul li {
display:inline-block;
padding-right:20px;
overflow:hidden;
width:132px;
height:25px;
}
.tab_wrapper ul > li:first-child a {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
border-radius: 0 0 0 7px;
}
.tabLnk {
position:absolute;
background-image:url('http://i.imgur.com/PkR4W.png');
background-position: -132px 1px;
background-repeat:no-repeat;
width:132px;
height:25px;
margin-top:1px;
z-index:9999;
font-size: 15px;
text-align: center;
line-height: 25px;
color: White !important;
text-decoration: none;
}
.borderTopLeftTabContent {
border-radius: 7px 7px 7px 7px !important;
}
.tabLnk.active {
width:130px;
background-position:-1px 1px;
-webkit-border-bottom-left-radius: 0px !important;
-moz-border-radius-bottomleft: 0px !important;
border-bottom-left-radius: 0px !important;
color: #833889 !important;
}
.tabLnk:hover, .tabLnk:focus {
text-decoration: none;
}
.tabLnk:visited {
color: White;
}
.hideContent {
left:-99999px;
}
.tabContent_wrapper {
/* new stuffs */
width:945px;
margin-top:1px;
margin-left:-1px;
border:1px solid #772981;
/*
border-top:0px;
*/
/* hide it first because of the 2 pixel roundedCorner padding */
display:none;
}
.tabContent {
/*
position:absolute;
*/
display:none;
background-color:White;
background-image: url('http://i.imgur.com/yyhGR.png');
background-repeat: no-repeat;
background-position: 98% 90%;
/* moved to tabContent_wrapper, this z-index is not needed now */
/*
border-left:1px solid #772981;
border-right:1px solid #772981;
border-bottom:1px solid #772981;
width:945px;
margin-top:1px;
margin-left:-1px;
z-index:9999;
*/
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
}
.tabContent_img {
float: left;
width:290px;
height:155px;
padding: 20px 20px 10px 15px;
}
.tabContent_description {
padding: 32px 140px 20px 0px;
width:450px;
float:right;
font-size: 14px;
color: gray;
}
.tabContent_description p:first-child {
padding-bottom: 10px;
}
.lblTabTxt {
color: white;
padding-left: 3px;
top: 5px;
position: relative;
}
.lblTabTxt:hover {
text-decoration: none;
}
/* Pete... clearfix from Drupal */
/**
* Markup free clearing.
*
* @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
*/
.clearfix:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .clearfix {
height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
min-height: 1%;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var tabLnk = $('.tabLnk');
$('.tabContent').click(function (event) {
event.stopPropagation();
});
tabLnk.each(function () {
$(this).attr("href", "javascript: void(0)")
});
tabLnk.click(function (event) {
event.stopPropagation();
var $this = $(this);
var hideActive = $('.active').parent().index();
if ($this.hasClass('active')) {
$this.removeClass('active');
$('.tabContent_wrapper .tabContent:eq(' + hideActive + ')').hide();
// hide tabContent_wrapper too (when empty, it would look ugly because of the 2px padding)
$('.tabContent_wrapper').hide();
} else {
$('.tabLnk').removeClass('active');
$this.addClass('active');
var showActive = $('.active').parent().index();
$('.tabContent_wrapper').show();
var activeContent = $('.tabContent_wrapper .tabContent:eq(' + showActive + ')');
activeContent.show();
activeContent.siblings().hide();
}
if ($('.tab_wrapper li a').slice(1, 3).hasClass('active')) {
$('.tabContent').slice(1, 3).addClass('borderTopLeftTabContent');
}
});
});
</script>
</head>
<body>
<div id="ctl00_cphBody_pnltabWrapper" class="tabHome_wrapper">
<div id="tabArea" class="tab_wrapper">
<ul>
<li> <a class="tabLnk" href="javascript: void(0)">
Administrators
</a>
</li>
<li> <a class="tabLnk" href="javascript: void(0)">
Teachers
</a>
</li>
<li> <a class="tabLnk" href="javascript: void(0)">
Technologists
</a>
</li>
</ul>
</div>
<div id="tabContentArea" class="tabContent_wrapper roundedCorners">
<div class="tabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p> <strong><span style="COLOR: #4b0082">Administrators</span> </strong></p>
<p>a aliquet dolor gravida. Sed auctor imperdiet lacus vel vulputate.venenatis
mauris, a dignissim elit fringilla ac. Quisque malesuada dapibus venenatis.
Aliquam volutpat ante id diam auctor eu volutpat massa sem et augue. Vestibulum
tortor lacus, venenatis sed ultricies ac, porta et ligula. Duis consectetur
Mauris fringilla massa ac sem tristique consectetur. Aliquam varius, lacus
vel sollicitudin congue, elit erat luctus mauris, Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Quisque posuere nunc lacinia diam ornare
a ullamcorper nulla egestas.</p>
</div>
</div>
<div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p><strong><span style="COLOR: #4b0082">Teachers</span></strong></p>
<p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT</p>
</div>
</div>
<div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p> <strong><span style="COLOR: #4b0082">Technologists </span></strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada,
nulla eu viverra iaculis, nibh ipsum rhoncus risus, sit amet porta sapien
elit id turpis. Donec eu nibh diam. Ut placerat vulputate ligula, ut mattis
odio adipiscing id. Nullam vel arcu est. Praesent vitae porta metus. Cras
auctor sem non nisi aliquet ultricies. Suspendisse potenti. Curabitur gravida
eleifend aliquam. Fusce consequat cursus eros sit amet hendrerit. Curabitur
quam nibh, auctor id dictum non, dapibus sit amet libero.</p>
</div>
</div>
</div>
</div>
</body>
</html>
一些截图：
- 默认情况下，不打开任何选项卡：
- 第一个标签打开：
- 打开第二个标签：
- 第三个标签打开：
当然，您必须操纵上边框，以免在活动选项卡下显示边框。
让我知道这是否有帮助。
您可能会注意到：没有边框、没有背景和没有背景图像（小彩色框）。