javascript - jquery 选项卡边框问题

Question

我使用过 jQuery 选项卡，但无法覆盖一件事。

#tabs .ui-tabs-nav {
    height: 2.35em;
    text-align: center;
}
#tabs .ui-tabs-nav li {
    display: inline-block;
    float: none;
    margin: 0em;

}

#tabs .ui-widget-content { 
    border: none;
    background: none; 
    padding-left:13px;
}
#tabs .ui-widget-header { 
    border: none; 
    background: #ffffff;
    font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;
    font-size:12px;
}
#tabs .ui-state-default, .ui-widget-content .ui-state-default {
    background:#b9c9fe; 
    border:1px solid #E0E0E0;
}
#tabs .ui-state-active, .ui-widget-content .ui-state-active {
    background:#e8edff none; 
    border:1px solid #ffffff;
}

问题是我无法摆脱外部边框。

有人愿意帮忙吗？

谢谢你的建议。

HTML:

<div id="tabs">
        <ul>
            <li><a href="#tabs-1">1</a></li>
            <li><a href="#tabs-2">2</a></li>
            <li><a href="#tabs-3">3</a></li>
            <li><a href="#tabs-4">4</a></li>
            <li><a href="#tabs-5">5</a></li>
        </ul>
        <div id="tabs-1">
            <p>TODO</p>
        </div>
        <div id="tabs-2">
            <p>TODO</p>
        </div>
        <div id="tabs-3">
            <p>TODO</p>
        </div>
        <div id="tabs-4">
            <p>TODO</p>
        </div>
        <div id="tabs-5">
            <p>TODO</p>
        </div>
    </div>

添加了带有 HTML 代码的代码，以显示它如何与包含的 CSS 一起使用。

Answer 1

假设#tabs 是您调用.tabs() 的元素，需要更改此选择器:

#tabs .ui-widget-content

到

#tabs.ui-widget-content

或

#tabs