Jquery UI sekmelerine özel stiller ekleme

Question

JQuery UI sekmelerim için bazı özel stiller eklemeye çalışıyorum. Bu benim sekmeler için beklenen çıktı.

ben onu anlamaya çalıştı, ama yine de herhangi bir şans alamadım.

Bu şimdiye kadar kodudur:

<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: Sana keman ile iş sağladık ettik

#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

. "! Önemli" Sen bana bildirin için uygun değildir eğer öyleyse

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

Benim çözümüm, işareti html5 bağlıdır: Ve bu sonucudur. istediğiniz gibi

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

arka plan özelliğini değiştirme:

Çalışmak gerekir nav bar arka planını değiştirmek için. Diğer tüm sekmeler tarafından işlenir

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

:

Aktif sekme tarafından ele alınır

.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

!important kullanarak, stil artık basamaklı değildir. Bunu kullanmaktan kaçınmaya çalışın!