0

我刚刚使用 jQuery UI 为 2 个选项卡创建了一个简单的容器，我现在要做的就是删除出现在它下面的边框。我已经多次尝试使用来自类似问题的信息，但仍然没有。这是正在使用的代码：

<script>
$(function () {
    $("#Tabs").tabs();
});
</script>

<div class="Tabs" id="Tabs">
    <ul>
        <li><a href="#Tabs-1">Background</a></li>
        <li><a href="#Tabs-2">Contact Info</a></li>
        <li><a href="#Tabs-3">Photos</a></li>
    </ul>
    <div class="tabContent">

        <div id="Tabs-1">
           Some content
        </div>

        <div id="bgTabs-2">
           Some content
        </div>

    </div>
</div>

以及正在使用的 CSS：

div.Tabs {
height: auto;
width: 625px;
font-size: 18px;
font-weight: bold;

}

.Tabs ul {
margin: 0px;
padding: 0px;
list-style-type: none;
cursor: pointer;
}

.Tabs ul li {
    position: relative;
    display: inline;
    text-align: center;
}

    .Tabs ul li a {
        padding: 0px 15px;
        text-decoration: none;
        text-decoration-color: black;
        text-decoration-style: none;
        border-bottom:none;
    }

即使使用“border-bottom:none”行，我仍然会得到一个边框。不管我把它放在哪里。我什至尝试过 .ui-widget-content{ border: none; }

再次，我确实搜索了这个站点，但我认为以最简单的形式询问它，例如这个代码应该有助于将来的参考。

4

1 回答 1

-1

我认为您的问题将通过使用border:0;而不是border:none;.
尝试使用这样的东西：

.ui-widget-content {
    border-bottom:0;
}

或像这样：

.ui-widget-content {
    border:0;
}

工作示例

于 2013-07-23T02:31:10.603 回答