Left tabset highlighting

  • 1
  • Question
  • Updated 5 years ago
When using a right or left tabset, the default behavior is to highlight the other tab instead of the tab that the user is looking at. Is there a way to reverse that behavior, so that the current tab will be highlighted instead of being the same color as the rest of the page?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Moshe - We are reusing the UI applied to "Tabs on Top" model here,  and it is not super effective.  But you can override the CSS for the 'active tab' so that it has more differece. 

You want to be careful to add a Unique ID to the Tabset so that the css you apply doesn't affect lots of other items on your page.  I used ID "LeftTabSet"

Then add a custom CSS statement that looks somthing like this: 

#LeftTabSet .ui-state-active 
{background: yellow;}

Here is the result: 





Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Thanks that works! I would like the color to be similar to the rest of the page, can you give me some css that would simply reverse the colors? Instead of a color that clashes with the rest of the page. Thanks