javascript 如何在 CSS 中更改选定的选项卡颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6385215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the Selected tab Color in CSS
提问by ram
This is my Tabs CSS code. The tab color should change when I click on the tab.
这是我的 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; }
*/
I have tried following codes to change color of when it selected...
我试过下面的代码来改变它选择时的颜色......
.custom #tabbuttons .tab1 a:selected{background: #FDF5CE;color:#FF0000}
or
或者
.custom #tabbuttons .tab1 a:active{background: #FDF5CE;color:#FF0000}
or
或者
.custom #tabbuttons .tab1 a:clicked{background: #FDF5CE;color:#FF0000}
But no one working for me.....
但是没有人对我来说有效......
Also tab coding in Body are below....
正文中的制表符编码也如下......
<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>
What is the problem here...How to change color of the tab...Please help me......
这里有什么问题......如何改变标签的颜色......请帮助我......
回答by DarthJDG
You can't use CSS pseudoclassesin your rules to handle jQuery UI widget state, jQuery UI adds/removes classes to reflect that.
您不能在规则中使用CSS 伪类来处理 jQuery UI 小部件状态，jQuery UI 添加/删除类以反映这一点。
The selected tab gets the ui-tabs-selectedclass. You can have a look at the classes and element structure of the jQuery Tabs widget in the documentation. Your CSS should look like this:
选定的选项卡获取ui-tabs-selected类。您可以在文档中查看 jQuery Tabs 小部件的类和元素结构。你的 CSS 应该是这样的：
.custom #tabbuttons .tab1 a.ui-tabs-selected { background:#FDF5CE; color:#FF0000; }
The above assumes that you have an ancestor element with the class custom, which you forgot to include in your markup.
以上假设您有一个带有 class 的祖先元素custom，但您忘记将其包含在标记中。
回答by easwee
I think you misunderstood the use of pseudo selectors ( http://www.w3.org/TR/CSS2/selector.html#pseudo-elements).
我认为您误解了伪选择器的使用（http://www.w3.org/TR/CSS2/selector.html#pseudo-elements）。
You will need to apply a class that makes your <li>selected trough javascript or andy other way. Something like:
您将需要应用一个类，使您<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;}
