7

jquery UI タブにいくつかのカスタム スタイルを追加しようとしています。これは、タブの期待される出力です。

ここに画像の説明を入力

私はそれを理解しようとしましたが、まだ運がありません。

これはこれまでのコードです:

<div id="main">
            <div class="ui-widget-header ui-corner-top">
                <ul>
                    <li><a href="#tabs-1">My Databases</a></li>
                    <li><a href="#tabs-2">Database Stats</a></li>
                </ul>
            </div>

            <div id="tabs-1" class="tabs3">
                <p>Database stats</p>
            </div>

            <div id="tabs-2" class="tabs3">
                <p>You could not be registered due to a system error. We apologize for any inconvenience.</p>
            </div>
</div>

CSS :

#main {
   margin-left: 246px;
   position: relative;
    padding: 0;
}


#main ul, .tabs3 {
   white-space: nowrap;
}

#main ul{
   border-bottom: medium none;
   //padding: 6px;
    height: 25px;
    border: none;
}

.ui-tabs .ui-tabs-nav {
   margin: 0;
   padding: 0.2em 0.2em 0;
    border: none;
}

.ui-tabs .ui-tabs-nav li {
    border: none;
    margin: 0 0 -5px 0;
}

#main ul.ui-widget-header, #main ul.ui-widget-content, #main ul.ui-state-default, #main ul.ui-state-hover {
    background: none;
    border: none
}

#main .ui-tabs-active a {
   -moz-border-bottom-colors: none;
   -moz-border-left-colors: none;
   -moz-border-right-colors: none;
   -moz-border-top-colors: none;
   background: url("images/ui-bg_highlight-hard_100_f9f9f9_1x100.png") repeat-x scroll 50% top #F9F9F9;
   border-color: #CCCCCC;
   border-image: none;
   border-style: solid;
   border-width: 1px 1px 0;
   color: #222222;
   position: relative;
   z-index: 5;
}

MY JSフィドル

4

2 に答える 2

10

私はあなたが提供したフィドルで作業しました。そして、これは結果です：

http://jsfiddle.net/qP8DY/7/

私の解決策は html5 の "!important" マークに依存しているため、適切でない場合はお知らせください。

ナビゲーション バーの背景を変更するには、次の操作を行う必要があります。

.ui-tabs-nav {
    background-color: #222 !important; /*To overwrite jquery-ui.css*/
    height: 30px;                        /*To stop nav block scaling of tab size*/
}

必要に応じて背景のプロパティを変更します。

アクティブなタブは次によって処理されます。

#main .ui-tabs-active a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: white;        /*To make it looks like on example pic, it is possible do do with it whatever you want*/
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px 1px 0;
    border-radius: 5px 5px 0 0;    /*To affect only top corners*/
    color: #222222;
    position: relative;
    z-index: 5;
    color: black !important;             /*To overwrite jquery-ui.css*/
    text-decoration: none !important;     /*To overwrite jquery-ui.css*/
}

他のすべてのタブは次によって処理されます。

.ui-tabs .ui-tabs-nav li {
    position: relative;    /*To overwrite jquery-ui.css*/
    top: -10px !important;  /*To overwrite jquery-ui.css*/
    border: none;
margin: 0 0 -5px 0;
    background: none;
}
.ui-tabs-anchor{
    color: white !important;                  /*To overwrite jquery-ui.css*/
    text-decoration: underline !important;    /*To overwrite jquery-ui.css*/
}
于 2013-06-10T09:46:30.283 に答える
3

を使用する!importantと、スタイルシートがカスケードしなくなります。これを使用しないようにしてください。

于 2013-06-10T09:56:16.487 に答える