JqueryのUIタブにカスタムスタイルを追加する

Question

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 JSfiddle

Answer 1

。 「！重要な」あなたは私が知っているため、それに適していないので、もし

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

私のソリューションは、マークHTML5に依存します。そして、これは結果です。あなたが望むような背景のプロパティを変更する

.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*/ 
} 

：

アクティブなタブがによって処理され!importantを使用して

.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*/ 
} 

Answer 2

、あなたのスタイルシートはもうカスケード接続されていません。これを避けるようにしてください！