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

尝试这个

.ui-widget-content{
    border: none !important;
}

它也可能是

.ui-widget-header{
   border: none;
}

Answer 2

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

#tabs .ui-widget-content

至

#tabs.ui-widget-content

或者

#tabs