This is my Tabs CSS code. The tab color should change when I click on the tab.
/* #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......
This is my Tabs CSS code. The tab color should change when I click on the tab.
/* #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......
Share Improve this question edited Dec 13, 2016 at 5:48 user6269864 asked Jun 17, 2011 at 11:40 ramram 111 gold badge1 silver badge2 bronze badges 1- 2 you have to keep your questions concise and to-the-point. – painotpi Commented Jun 17, 2011 at 11:43
2 Answers
Reset to default 3You can't use CSS pseudoclasses in your rules to handle jQuery UI widget state, jQuery UI adds/removes classes to reflect that.
The selected tab gets the ui-tabs-selected
class. 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:
.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.
I think you misunderstood the use of pseudo selectors ( http://www.w3/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:
<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;}