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> 

सीएसएस:

#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; 
} 

मेरी JSfiddle

Answer 1

मैं बेला के साथ काम आपके द्वारा दिए गए गए हैं। "! महत्वपूर्ण"

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

मेरे समाधान, एचटीएमएल 5 पर निशान निर्भर करता है इसलिए यदि यह उपयुक्त नहीं के लिए आप मुझे पता है: और यह परिणाम है।

नेविगेशन बार पृष्ठभूमि को बदलने के लिए आपके साथ काम करना होगा:

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

Answer 2

!important का उपयोग करना, अपने स्टाइलशीट अब और व्यापक नहीं है। इसका उपयोग करने से बचने की कोशिश करो!