这是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中看到结果。
但是,我的问题是当选项卡处于活动状态时,我想清除下面的边框底部。我该怎么做?提前谢谢。
[更新]
这就是我想要的样子:jquery - CSS选项卡菜单问题-LMLPHP。有一条黑色的底线。我想要。其他的都很好

最佳答案

下面是一个利用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/

10-05 21:05
查看更多