jquery - 删除所选选项卡下方的边框

Question

有人可以告诉我如何删除所选选项卡下方的边框吗？我尝试了各种方法都无济于事。

我曾尝试为选项卡添加负边距并创建白色边框，但由于我试图覆盖的边框来自内容 block 而不是选项卡，所以我不知所措。

编辑:这是底部带有 jquery 的简化 HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
    $(function() {
        $( "#faq_accordion_stu" ).accordion({
            collapsible: true,
            heightStyle: "content", 
            active: false, 
        });
     });
</script>
<script>
    $(function() {
        $( "#faq_accordion_emp" ).accordion({
            collapsible: true,
            heightStyle: "content", 
            active: false
        });
    });
</script>

<section id="qa-main">  

<div class="container">

<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1"><h2 id="q-header">For Students</h2></li>
    <li class="tab-link" data-tab="tab-2"><h2 id="q-header">For Employers</h2></li>
</ul>

    <div id="faq-accordion" class="large-10 columns">

    <div id="tab-1" class="tab-content current">
        <div class="large-12 column">
            <div id="faq_accordion_stu">'
            <h3 class='accordion-q'>Question</h3>
            <div><p class='accordion-a'> Answer </p>


            </div>
        </div>
    </div>

    <div id="tab-1" class="tab-content current">
        <div class="large-12 column">
            <div id="faq_accordion_stu">'
            <h3 class='accordion-q'>Question</h3>
            <div><p class='accordion-a'> Answer </p>


            </div>
        </div>
    </div>

    </div> <!-- end faq-accordion -->
</div> <!-- end container-->

</section> <!-- end section qa-main -->

CSS:

.container{
    width: 800px;
    margin: 0 auto;
    padding-top: 2em;
}

ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.tabs li{
    background: none;
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    border-top: 2pt solid #EF5A32;
    border-left: 2pt solid #EF5A32;
    border-right: 2pt solid #EF5A32;
    background-color: white;
    margin-right: 1rem;
}

ul.tabs li.current{
    background: #ededed;
    color: #222;
    background-color: white;
}

.tab-content{
    display: none;
    background: #ededed;
    padding: 15px;

}

.tab-content.current{
    display: inherit; 
}

JQUERY:

<script> 
    $(document).ready(function(){

    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

})
</script>

Answer 1

一种方法是让事件标签 (.current) 直接与内容容器 (#faq-accordion) DIV 的边框重叠，而非事件标签位于内容容器下方。

要做到这一点，需要完成两个步骤:

1. 定位选项卡，使其边框与内容容器的边框重叠。我们可以通过以某种方式向下拉选项卡或以某种方式向上拉内容容器来做到这一点。
2. 确保选项卡在元素堆叠顺序中位于内容容器之上。默认情况下，稍后出现在标记中的元素将堆叠在标记中出现在它们之前的元素之上。我们将不得不克服默认堆叠。

位置标签

您可以通过在选项卡上设置负边距来拉出内容容器 #faq-accordion:

ul.tabs li {
    margin-bottom: -1px; /* adjust as needed */
}

隐藏边框

然后更改当前事件/选择选项卡的堆叠顺序，这会将内容容器的边框隐藏在您的选项卡后面。

ul.tabs li.current {
    position: relative;
    z-index: 5;
}