这是javascript部分:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("ul#tabs li").click(function(e){
if (!jQuery(this).hasClass("active")) {
var tabNum = jQuery(this).index();
var nthChild = tabNum+1;
jQuery("ul#tabs li.active").removeClass("active");
jQuery(this).addClass("active");
jQuery("ul#tab li.active").removeClass("active");
jQuery("ul#tab li:nth-child("+nthChild+")").addClass("active");
}
});
});
</script>
这是css部分:
ul#tabs {
list-style-type: none;
padding: 0;
border: 1px solid #F2F2F2;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
}
ul#tabs li {
display: inline-block;
padding: 10px 15px;
border-right: 1px solid #F2F2F2;
cursor: pointer;
color: #A5A5A5;
}
ul#tabs li:hover {
/*background-color: #238b68;*/
color: #BA1707;
}
ul#tabs li.active {
margin: 0px 0px -1px;
color: #BA1707;
/*background-color: #238b68;*/
}
ul#tab {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#tab li {
display: none;
}
ul#tab li.active {
display: block;
}
最后是HTML部分:
<div class="tabmenu">
<ul id="tabs">
<li class="active">Description</li>
<li>Reviews</li>
<li>Ask a question</li>
</ul>
<ul id="tab">
<li class="active">
<div class="product-attributes">
<?php echo $this->getChildHtml('attributes');?>
</div>
</li>
<li>
<?php echo $this->getChildHtml('review_block');?>
</li>
<li>
<div class="support_box">
<?php echo $this->getChildHtml('product.support') ?>
</div>
</li>
</ul>
</div>
您可以在Fiddle中看到结果。
但是,我的问题是当选项卡处于活动状态时,我想清除下面的边框底部。我该怎么做?提前谢谢。
[更新]
这就是我想要的样子:。有一条黑色的底线。我想要。其他的都很好
最佳答案
下面是一个利用z-index
来基本上覆盖ul底部border
的解决方案,在活动LI
上有一个白色边框:
ul#tabs li {
position: relative;
z-index: 5;
display: inline-block;
padding: 10px 15px;
border-right: 1px solid #F2F2F2;
cursor: pointer;
color: #A5A5A5;
}
LI
元素之间的空白也有问题,因此html中的comment标记可以删除那些讨厌的空格,否则会导致边框宽度问题。<ul id="tabs">
<li class="active">Description</li><!--
--><li>Reviews</li><!--
--><li>Ask a question</li>
</ul>
小提琴:https://jsfiddle.net/mn3g8u9a/