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>

你可以在小提琴中看到結果

但是，我的問題是當標簽處於活動狀態時我想清除下面的邊框底部。 我怎樣才能做到這一點？ 提前致謝。

[更新]這就是我想要的樣子： 。 有一條黑色的底線。 我要它 。 其余的都很好

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元素之間的空白也存在問題，因此HTML中的注釋標記可以刪除那些討厭的空格，否則會導致邊框寬度出現問題。

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

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

Answer 2

我想你希望外觀看起來像這樣 - https://jsfiddle.net/p2dk1txu/5/

我做的是用display: table-cell而不是display: inline-block和set border-collapse: collapse ，邊框也設置在li而不是ul

Answer 3

問題是你的邊框是在ul ，但是你試圖從一個li刪除border-bottom。 解決這個問題：

首先，移動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 ，在<li>放置了font-size: 0 font-size:14px 。 因為使用內聯塊，所以有一個空間。

    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

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

小提琴