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 に答える