The Tab Set component triggers a tabshow JavaScript event whenever a Tab is selected / activated. Any event handlers bound to the tabshow event are passed a jQuery event object that allows you to know which Tab was selected.
Here is some example code that will spit out the Id of the Tab that was shown (technically the Id of the Tab Panel, not the Tab Nav, but this is). Tabs are given auto-generated Ids by default, but if you give your Tabs Unique Ids, then you could use this to reliably run different code based on the Tab Id that was shown.
This should be added to your Skuid Page as a JavaScript Resource of type Inline (NOT Snippet, NOT Component)
(function(skuid){ <br> var $ = skuid.$;<br> $(function(){<br> $('body').on('tabshow',function(event){<br> var tabShown = $(event.target);<br> var tabId = tabShown.attr('id');<br> console.log(tabId);<br> });<br> });<br>})(skuid);
One point to note here: we bound this event generically to the whole document’s body element. We could have been more specific, and bound it just to TabSet elements, or to a particular TabSet, for instance one that we gave the Unique Id “Level1Nav”. This is a good idea if you have multiple TabSets on the same page and you want to bind separate handlers to each of them.
Here is what this alternate syntax would look like:
$('#Level1Nav').on('tabshow',function(event){<br> var tabShown = $(event.target);<br> var tabId = tabShown.attr('id');<br> console.log('showed a tab in Level1Nav: ' + tabId);<br>});
