Question

我正在尝试为我的jquery UI标签添加一些自定义样式。这是我期望的标签输出。

enter image description here

我试图弄明白，但仍然没有运气。

这是到目前为止的代码：

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

我的JSfiddle

Answer 1

我和你提供的小提琴一起工作。这是结果：

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

Answer 2

使用!important，您的样式表不再级联。尽量避免使用它！

将自定义样式添加到Jquery UI选项卡

2 个答案: