Get the ID of the tab (div) being activated

Question

I'm using jquery 1.9 and jquery UI 1.10

I want to be able to get the tab ID when clicking on a tab. For example if I clicked tab named "Second" I want to get "tabs-2" response.

I've done the below code so far:

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            beforeActivate: function (event, ui) {
                alert(/* the id of the tab (div) being activated */);
            }
        });
    });
</script>

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">First</a></li>
       <li><a href="#tabs-2">Second</a></li>
    </ul>
    <div id="tabs-1">
        <p>abcde</p>
    </div>
    <div id="tabs-2">
        <p>fghi</p>
    </div>
</div> 

Dharma

time to update the chosen answer I believe :) – Omen

Answer 1

Tested and working with JQueryUI 1.10, how to get the ID of the tab as it is selected:

$("#tabs").tabs({
  beforeActivate: function (event, ui) {
    alert(ui.newPanel.attr('id'));
  }
});

Moats

alert(ui.newTab.context.innerText) to display the tab clicked on's text – Omen

updated the correct answer because I think this is a better solution. Thanks Lamah – Dharma

just to know... is it wrong to use the way @AdrienBe suggests? – Fugere

Answer 2

var $tabs = $("#tabs").tabs({
    select: function( evt, ui ) {
        $("#current").text( $(ui.tab).attr('href'));
    }
})

UPDATE - Another solution for jquery UI 1.10

    $(function () { $('#tabs').tabs({ 
             activate: function (event, ui) {
             var active = $("#tabs").tabs("option", "active");
             alert($("#tabs ul>li a").eq(active).attr('href')); 
     } 
}); 

Updated jsFiddle Demo

Harassed

The code you provide is not fully compatible with jquery ui 1.10. Anyway I want to get the data by clicking on the tab, not another button on the page. thanks anyway – Dharma

The "Updated jsFiddle Demo" shows the same demo, tabs and a external button which shows the selected tab id. As I said, I want to get the id by clicking on the tab, not another button on the page. – Dharma

@Dharma - both actions will do the same :) , when you click on the tab you will get tab Id also. - This updated one without button - jsfiddle.net/WnDV9/3 – Harassed

yes, you're right, sorry. But I can not run your code as you put it, since it seems that in version 1.10 doesnt work, because the various changes in that version. But to be fair, your code is what helped me to get a solution. I can not answer myself yet, so if you edit your answer with this code I will give it for good. $(function () { $('#tabs').tabs({ activate: function (event, ui) { var active = $("#tabs").tabs("option", "active"); alert($("#tabs ul>li a").eq(active).attr('href')); } }); }); – Dharma

Answer 3

This works for me

$( "#editor_tabs" ).tabs( { 
    activate: function ( event, ui ) {
        $(ui.newTab.find("a").attr("href")).html("Got It");
    }
});

Gaige

I use a similar method to make various "flavours" of Tabs.... by adding a class or another attribute, I can have some specific behaviour enabled on activation. – Tumbling

Answer 4

If you want to get something when clicking on tab, use the select event.

$('#tabs').tabs({
  beforeActivate: function(event, ui){
     alert($(ui.tab).attr('href'));
 }
 });

EDIT

Changed 'select' to 'beforeActivate' as it has been removed from version 1.10

Unsought

thanks but select event has been removed in jquery ui 1.10 jqueryui.com/upgrade-guide/1.10/… – Dharma

thanks man.. But if you wanted to know how to get the href, hope "$(ui.tab).attr('href')" would have helped u. – Unsought

it should be: $(ui.newTab).attr('href') -> api.jqueryui.com/tabs/#event-beforeActivate anyway, it returns nothing – Dharma

Answer 5

I'm guessing you want to know which tab gets activated, and based on that execute various actions.

Rather than fetching ids and attributes from the HTML elements, here is how you do it:

$("#tabs").on("tabsactivate", (event, ui) => {
    if (ui.newPanel.is("#tabs-1")){
        //first tab activated
    }
    else{
        //second tab activated
    }
});

The activate event is not getting called when the tabs get created. For that you'd need to add the "tabscreate" event in the mix, but you get the idea.

Dionysus

Answer 6

Examine the JQueryUI event object (use a browser debugger like Mozilla's Firebug or Chrome developer tools).

$("#tabs").tabs({        
    activate: function( event, ui ) { 
        console.log(event)  //unnecessary, but it's how to look at the event object              
        alert(event.currentTarget.hash)
    }
});

Employment

Answer 7

var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);

Commissionaire

Answer 8

Use aria-controls

alert(ui.newTab.attr("aria-controls"));

Swinger

Answer 9

In my opinion, the easiest way is to add data- to the <li ...> that make up the tabs.

For example:

                <li data-index="2" data-tabname="Notes">
                  <a href="#tabs-Employee-Notes">Notes</a>
                </li>

Then handle the beforeActivate event (if that is the event you are looking at):

$("#jqTabs_EmployeeDetails").tabs({
    heightStyle: "fill",
    beforeActivate: function (event, ui) {
        var n = ui.newTab;

        console.log($(n).data());
    }
});

For example, $(n).data("tabname") would return the tab name. This also allows you to add any other information you need to the tabs. Simplist solution and scalable I believe.

Impregnate

Answer 10

It works for me

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

Royce

Add some explanation to your answer please. – Nissie

Answer 11

The easyest way I found is :

$('#tabs .ui-state-active').attr('aria-controls')

This will return the ID from the div witch is active. Remember you must change #tabs to your jquery.tabs ID.

Sherilyn