jQuery UI 1.10 Tabs - Getting Index of Current Tab

Posted on 03/18/2013 at 10:00 pm by Kevin Wentworth
Viewed 18,161 times | 0 comments

I remember being able to get the index of the current tab very easily from jQuery UI, something like ui.panel.index.  I couldn't find it in my code and figured out the way to do it with jQuery UI 1.10

Determining the Current Tab Index

Most of the documentation and examples for JQuery UI keep using the same basic code that doesn't really work if you have more than one tabbed-interface on any of your web pages.  The jQuery UI documentation tells you to do this:

  1. // getter
  2. var active = $( ".selector" ).tabs( "option", "active" );

Getting the Tab Index of the Currently Active Tab

The above will work fine if you have a single div.selector on your page.  However, if you have multiple tab sets, I've found the easiest solution is the following:

  1. // this will work in any callback function - activate() or load()
  2. var $thisTabContainer = ui.newTab.closest('.ui-tabs');
  3. var active = $thisTabContainer.tabs("option", "active");

That way, no matter how many different configurations of tabs you may have on a page, you will always get the current tab.


-Kevin Wentworth

Bookmark and Share

Tags for jQuery UI 1.10 Tabs - Getting Index of Current Tab

Ui | Upgrade | Web Programming | Example

Comments for this Posting

No comments. Be the first to post a reply.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design