Need currently selected tab ID for jQuery tabs

R

11

22

I know I can get the index of the currently selected tab but can I somehow get to the ID (the equivalent of the ui.panel.id if this were triggered by an tab event...but it's not) of the currently selected tab? I'd prefer not to use the index because ordering of the tabs might change. I prefer not to use the style markups as those may change in future releases. Is there a method for this? If not, can I somehow use the index to access this (maybe even by accessing the panel object first)? Any other ideas?

Retral answered 8/12, 2009 at 2:27 Comment(2)

A variation of the question would be: Is there a way to get the tab panel from the index? – Precise 8/12, 2009 at 23:38

Possible duplicate of jQuery ui tabs: get the id of the tab (div) being activated – Antilogy 11/3, 2015 at 6:8

W

25

You can use the :visible pseudo-selector to target the visible panel:

$("#tabs .ui-tabs-panel:visible").attr("id");

It's worth noting that you can retrieve the active tab from the activate event:

$("#tabs").tabs({
    activate: function (event, ui) {
        console.log(ui.newPanel[0].id);
    }
});

Wintertide answered 8/12, 2009 at 2:30 Comment(4)

That's pretty goofy. What if you have multiple tab widgets on a page, for instance? – Precise 8/12, 2009 at 23:38

Then you give a more specific selector. $("#group1 .ui-state-active"). – Wintertide 9/12, 2009 at 1:40

This solution didn't work for me. Instead I found this answer: https://mcmap.net/q/186638/-jquery-ui-tabs-how-to-get-currently-selected-tab-index/11992 – Beisel 22/11, 2011 at 13:48

this gets the tab element not the container – Frontpage 16/2, 2016 at 7:45

R

13

Jonathan Sampson's answer doesn't work anymore. Try...

$("#tabs .ui-tabs-panel:visible").attr("id");

jsFiddle: http://jsfiddle.net/tbEq6/

Romanov answered 13/11, 2013 at 15:41 Comment(0)

A

4

If you want the id (or actually the href) from the selected tab, you can use eq() to retrieve the jQuery Object.

You can see an example here: http://jsfiddle.net/svierkant/hpU3T/1/

Australia answered 20/5, 2012 at 7:52 Comment(0)

M

3

As I posted in an answer to this question, there are several ways to achieve this.

On the jQuery documents, they propose to do the following to find the index of the currently open tab:

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

However, this is impractical if you need to do a lot with that tab. Why they don't yet provide a more practical solution of getting the actual element, I'm unsure, however, through use of jQuery there is an easy solution you can create yourself.

In the following code i'll show you just how easy it is to do anything you want with the current tab:

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),  //  will get you the index number of where it sits
    curTabID = curTab.prop("id"),  //  will give you the id of the tab open if existant
    curTabCls = curTab.attr("class");  //  will give you an array of classes on this tab
        //  etc ....
//    now, if you wanted a little more depth, for instance specific tabs area (if you have multiple tabs on your page) you can do simply add to your selector statement
var curTab = $('#myTabs_1 .ui-tabs-panel:not(.ui-tabs-hide)');
//    then you can make simple calls to that tab and get whatever data or manipulate it how you please
curTab.css("background-color", "#FFF");

Madelene answered 7/2, 2012 at 20:47 Comment(0)

D

3

After JQuery 1.9 selected is deprecated

So use

var active = $( "#jtabs" ).tabs( "option", "active" );

Dann answered 8/10, 2013 at 8:33 Comment(0)

C

1

For jquery version below 1.9:

 <div class="roundedFloatmenu">
        <ul id="unid">
            <li class="titleHover" id="li_search">Search</li>               
            <li class="titleHover" id="li_notes">Notes</li>
             <li class="titleHover active" id="li_writeback">Writeback</li>         
            <li class="titleHover" id="li_attorney">Attorney</li>
        </ul>
    </div

And you can find the active tab using:

 jQuery('#unid').find('li.active').attr('id')

Comedienne answered 21/8, 2017 at 16:36 Comment(0)

K

0

var curTab = $jQuery('#tabs .ui-tabs-panel:not(.ui-tabs-hide)').attr('id');

Kassie answered 27/7, 2012 at 14:55 Comment(0)

L

0

This works:

$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');

Liatrice answered 11/3, 2015 at 5:43 Comment(1)

Add some explanation to your answer please. – Teleran 11/3, 2015 at 9:14

P

0

For jQuery UI >= 1.9 you can use ui.newPanel.selector:

$('#tabs').on('tabactivate', function(event, ui) {
  console.log(ui.newPanel.selector);
});

Pioneer answered 8/3, 2016 at 18:37 Comment(0)

H

0

I knocked my head against this wall for a while. I have a number of tabs that reference urls mixed in with a bunch of tabs that are populated by javascript code and, therefore, have associated divs (.ui-tabs-panel) that are defined in the markup.

jQuery UI Tabs Widget links tabs with panels using the "aria-labeledby" property of the panel. That property has a value of the anchor contained in the tab. So, for this markup

<ul><li id='tab_1'><a href='ferndorf.php'>I Be Tab_1</a></li></ul>

After attaching the jQuery Tab Widget, you can find the appropriate panel using

panel = $( '.ui-tab-panel[aria-labeledby=' + $( '#tab_1 a' ).attr( 'id' ) + ']' )

vice-versa, you can find the tab associated with the panel using

tab = $( '#' + $( panel ).attr( 'aria-labeledby' ) ).closest( 'li' );

The index of tabs and panels is only related in simple structures.

Have fun.

Hett answered 24/8, 2021 at 1:2 Comment(0)

Q

-1

$("#tabs .ui-state-active a").attr("id");

Quintonquintuple answered 22/11, 2014 at 6:55 Comment(0)

Recommended topics

Hot tags