javascript - 如何在 CSS 中更改选定选项卡的颜色

Question

这是我的标签 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}

但是没有人为我工作......

下面还有正文中的制表符编码......

<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 pseudoclasses在处理 jQuery UI 小部件状态的规则中，jQuery UI 添加/删除类以反射(reflect)这一点。

选定的选项卡获取 ui-tabs-selected 类。您可以在 documentation 中查看 jQuery 选项卡小部件的类和元素结构。 .您的 CSS 应如下所示:

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

以上假定您有一个带有类 custom 的祖先元素，但您忘记将其包含在您的标记中。