How to work with 'tabSelect' event.

[Mark H_ Williams]

The AUI documentation for the Tabs control says that the AUI Tabs has only one event 'tabSelect'. How can I use this to tell which tab is selected and act on that select tab? Is there any documentation for this? 

[Volodymyr Krupach · Accepted solution]

Hi Mark,

I do it like:

html:
<ul class="tabs-menu">
  <li class="menu-item active-tab"><a href="#calendar-tab"><strong>Calendar</strong></a></li>
  <li class="menu-item"><a href="#time-tab"><strong>Timesheets</strong></a></li>
</ul>
 
JS:
AJS.$("#tabs > ul > li > a").bind("tabSelect", function(e, o) {
  if (o.tab.attr("href") == "#time-tab") {
  } else {
  }
}

[Mark H_ Williams]

Both answers work but this one is simpler and works with the actual object that's being returned. 

Thank you

[Sean Curtis]

You can get the tab (the link) they clicked via the event.target. Then you can look up the corresponding tab pane by looking at the href of that event.target. Open http://output.jsbin.com/xenika/ and look at your browser console log when you change tabs.

AJS.$('#my-tabs').on('tabSelect', function(e) {
  console.log('The tab clicked is:', e.target);
  console.log('The corresponding tab pane is:', AJS.$(e.target.getAttribute('href'))[0]);
});