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

中查看结果

但是，我的问题是当标签处于活动状态时我想清除下面的边框底部。我怎样才能做到这一点？提前谢谢。

[UPDATE] 这就是我想要的样子：。有一条黑色的底线。我要它。其余的都很好

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;
}

<{1}}元素之间的空白也存在问题，因此 评论标记

LI

小提琴：https://jsfiddle.net/mn3g8u9a/

Answer 2

我认为你希望外观看起来像这样 - https://jsfiddle.net/p2dk1txu/5/

我所做的是使用display: table-cell代替display: inline-block并设置border-collapse: collapse，边框也设置在li而不是ul

Answer 3

问题在于您的边框位于ul，但您尝试从单个li移除边框底部。解决这个问题：

首先，将border: 1px solid #F2F2F2;移出ul#tabs并移至ul#tabs li。

然后，将border-bottom: none;添加到ul#tabs li.active

希望有所帮助！

Answer 4

看到这个小提琴：

https://jsfiddle.net/p2dk1txu/4/

它的边框位于<li>，当处于活动状态时，边框底部变为零。为避免标签边距，我将font-size: 0放在标签中，将font-size:14px放在<li>中。因为使用内联块，所以在那里有一个空间。

    ul#tabs {
        font-size:0;
        list-style-type: none;
        padding: 0;
        text-transform: uppercase;
        font-weight: 700;
    }
    ul#tabs li {
        font-size: 14px;
        display: inline-block;
        padding: 10px 15px;
        border: 1px solid #F2F2F2;
        cursor: pointer;
        color: #A5A5A5;
    }
    ul#tabs li:hover {
        /*background-color: #238b68;*/
        color: #BA1707;
    }
    ul#tabs li.active {
        margin: 0px 0px -1px;
            border-bottom:0;
        color: #BA1707;
        /*background-color: #238b68;*/
    }

Answer 5

  .tabmenu {width:100%;}
ul#tabs {
    list-style-type: none;
    padding: 0;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
ul#tabs li {
    display: inline-block;
    padding: 10px 15px;
    border: 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;
    border: 1px solid #F2F2F2;
    border-bottom:transparent;
    /*background-color: #238b68;*/
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;

}

Answer 6

在border-bottom:none中添加ul#tabs，然后在border-bottom:1px solid #F2F2F2;上添加ul#tabs li，并在border-bottom:none中添加ul#tabs li.active。

Fiddle

CSS选项卡菜单问题

6 个答案: