jquery - CSS 选项卡菜单问题

Question

这是 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 中看到结果

但是，我的问题是当一个选项卡处于事件状态时我想清除下面的边框底部。我怎样才能做到这一点？提前致谢。

[更新] 这就是我想要的样子: .有一条黑色底线。我要它 。其他都很好

Answer 1

这是一个解决方案，它利用 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 元素之间的空格也有问题，因此 comment 标签 在 HTML 中删除那些讨厌的空格，否则会导致边框宽度出现问题。

<ul id="tabs">
  <li class="active">Description</li><!--
  --><li>Reviews</li><!--
  --><li>Ask a question</li>
</ul>

fiddle :https://jsfiddle.net/mn3g8u9a/