Question

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

我尝试在标签上添加一个负边距以及创建一个白色边框，但由于我试图覆盖的边框来自内容块，而不是标签我不知所措。

编辑：这是简化的HTML，底部是jquery

Exception Type:  EXC_BAD_ACCESS (SIGBUS)
Exception Codes: KERN_PROTECTION_FAILURE at 0x0000000000000000

CSS：

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

JQUERY：

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

Answer 1

您只需在border-bottom css区块中将none设置为ul.tabs > li.current：

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

Answer 2

一种方法是让您的有效标签（.current）直接与内容容器（#faq-accordion）DIV的边框重叠，而非有效标签位于内容容器下方。

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

定位标签，使其边框和内容容器的边框重叠。我们可以通过以某种方式向下拉标签或以某种方式向上拉出内容容器来实现此目的。
确保选项卡位于元素堆栈顺序中的内容容器上方。默认情况下，稍后出现在标记中的元素将堆叠在标记之前的元素之上。我们必须克服默认堆叠。

排名标签

您可以通过在标签上设置负边距来提取内容容器#faq-accordion：

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

隐藏边框

然后更改当前活动/选择标签的堆叠顺序，该选项卡会隐藏标签后面的内容容器边框。

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

删除所选标签下的边框

2 个答案: