Thêm kiểu tùy chỉnh vào các tab Giao diện người dùng Jquery

Question

Tôi đang cố gắng thêm một số kiểu tùy chỉnh cho các tab giao diện người dùng jquery của mình. Đây là sản lượng mong đợi của tôi cho các tab.

Tôi đã cố gắng tìm ra, nhưng vẫn không nhận được bất kỳ may mắn nào.

Đây là mã cho đến nay:

<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

Tôi đã làm việc với fiddle bạn đã cung cấp. Và đây là kết quả:

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

Giải pháp của tôi phụ thuộc vào html5 nhãn hiệu, vì vậy nếu nó không thích hợp cho bạn cho tôi biết "quan trọng!".

Để thay đổi nền thanh nav bạn phải làm việc với:

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

Thay đổi sở hữu nền như bạn muốn.

kích hoạt tab được xử lý bởi:

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

Tất cả các tab khác được xử lý bởi:

.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

Sử dụng !important, stylesheet của bạn không được tầng nữa. Cố gắng tránh sử dụng cái này!