css change on link to a tab

  • 1
  • Problem
  • Updated 2 years ago
  • In Progress
I'm overriding the standard tabs and using a combination of a link and javascript to switch between tabs.  For example: 

<a href="javascript:skuid.snippet.getSnippet('myinboxtab')();">My Inbox ({{$Model.CasesCountSum.data.length}})
</a>

My question is whether I can change the css of the above text (e.g. to bold) when that related tab is selected/active to replicate what currently happens on tabs?
Photo of Chris Mollan

Chris Mollan

  • 570 Points 500 badge 2x thumb

Posted 2 years ago

  • 1
Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb
If you mean the Skuid Tab Set, you can change the style either in the theme composer or by using this CSS selector:

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  font-weight: bold;
}
Photo of Chris Mollan

Chris Mollan

  • 570 Points 500 badge 2x thumb
So this is the page, the links on the left handside are templates that are replacing the tabs set (which I have hidden).  The reason for using templates is that I can update the count numbers be setting a render action every few seconds.

Each template link will load re-direct to the tab contents which is a page include.  

So, I would like to have the links (on the left) to be highlighted when that relevant tab is active.


Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb
Alright, then in your snippet you would have to add a class (e.g. active-menu-point) to the clicked template (and of course remove all the other active classes).

Afterwards you can set the style on the given class.