如何更改CSS中的Selected選項卡Color

Question

這是我的Tabs CSS代碼。 單擊選項卡時，選項卡顏色應該會更改。

/* #tab1 */
    .custom #tabbuttons .tab1 a     { background: #F6F6F6; color: #1C94C4; } /* override UI Theme */
    .custom #tabbuttons .tab1   {background:#006699}
    .custom #tabbuttons .tab1  a:hover{background: #FDF5CE;color:#FF0000}


    .custom #tabpanels #tab1,
    .custom #tab1 .ui-layout-resizer-sliding ,
    .custom #tab1 .ui-layout-west ,     /* sidebar panes too - for when 'sliding' */
    .custom #tab1 .ui-layout-east   { background: #4794D8; } 
    .custom #tab1 .ui-layout-resizer-closed { border: 1px solid #4cbf52; }
    .custom #tab1 .toolbar ,
    .custom #tab1 .ui-widget-header { background: #CEE3F6; border: 0; }
    .custom #tab1 .ui-widget-footer { background: #CEE3F6; border: 0; }
    /*
    .custom #tab1 > .ui-layout-center ,
    .custom #tab1 .ui-layout-pane .ui-layout-pane { border: 2px solid #4cbf52; }
    .custom #tab1 .ui-widget-content    { border: 1px solid #16b81e; }
    */

    /* #tab2  */
    .custom #tabbuttons .tab2 a     { background: #F6F6F6; color: #1C94C4; } /* override UI Theme */
    .custom #tabbuttons .tab2  a:hover{background: #FDF5CE;color:#FF0000}



    .custom #tabpanels #tab2,
    .custom #tab2 .ui-layout-resizer-sliding ,
    .custom #tab2 .ui-layout-west ,     /* sidebar panes too - for when 'sliding' */
    .custom #tab2 .ui-layout-east   { background: #4794D8; } 
    .custom #tab2 .ui-layout-resizer-closed { border: 1px solid #4cbf52; }
    .custom #tab2 .toolbar ,
    .custom #tab2 .ui-widget-header { background: #CEE3F6; border: 0; } 
    .custom #tab2 .ui-widget-footer { background: #CEE3F6; border: 0; } 
    /*
    .custom #tab2 > .ui-layout-center ,
    .custom #tab2 .ui-layout-pane .ui-layout-pane { border: 2px solid #4cbf52; }
    .custom #tab2 .ui-widget-content    { border: 1px solid #16b81e; }
    */

我嘗試過以下代碼來改變選擇時的顏色......

  .custom #tabbuttons .tab1  a:selected{background: #FDF5CE;color:#FF0000}

要么

.custom #tabbuttons .tab1  a:active{background: #FDF5CE;color:#FF0000}

要么

.custom #tabbuttons .tab1  a:clicked{background: #FDF5CE;color:#FF0000}

但沒有人為我工作.....

此外，Body中的標簽編碼如下......

<UL id="tabbuttons" class="hidden">
        <LI class="tab1"><A href="#tab1">Track Location</A></LI>
        <LI class="tab2"><A href="#tab2">Track Route</A></LI>
    </UL>

這里有什么問題......如何改變標簽的顏色......請幫幫我......

Answer 1

您不能在規則中使用CSS偽類來處理jQuery UI小部件狀態，jQuery UI添加/刪除類以反映這一點。

選定的選項卡將獲取ui-tabs-selected類。 您可以在文檔中查看jQuery Tabs小部件的類和元素結構。 你的CSS應該是這樣的：

.custom #tabbuttons .tab1 a.ui-tabs-selected { background:#FDF5CE; color:#FF0000; }

上面假設您有一個帶有custom類的祖先元素，您忘記將其包含在標記中。

Answer 2

我認為您誤解了偽選擇器的使用（ http://www.w3.org/TR/CSS2/selector.html#pseudo-elements ）。

您將需要應用一個類，使您的<li> javascript或其他方式選擇。 就像是：

<ul class="navigation">
<li class="selected"><a href="#">First</a></li>
<li><a href="#">First</a></li>
<li><a href="#">First</a></li>
</ul>

.navigation li {background:red;}
.navigation li.selected {background:blue;}