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>

time to update the chosen answer I believe :) – Adriano Jul 22 '13 at 15:51 — Adriano, Jul 22 '13 at 15:51

score 59 · Accepted Answer · answered Feb 24 '13 at 08:23

59

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'));
  }
});

answered Feb 24 '13 at 08:23

thenickdude

1,640
1
17
18

4

`alert(ui.newTab.context.innerText)` to display the tab clicked on's text – Adriano Jul 22 '13 at 15:50
1

updated the correct answer because I think this is a better solution. Thanks Lamah – AlvaroV Apr 07 '14 at 15:07
just to know... is it wrong to use the way @AdrienBe suggests? – techie_28 Feb 19 '16 at 07:01

Muhammad Hani · Answer 2 · 2013-01-24T17:54:32.030

22

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

edited Jan 24 '13 at 17:54

answered Jan 24 '13 at 13:17

Muhammad Hani

8,476
5
29
44

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 – AlvaroV Jan 24 '13 at 16:59
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. – AlvaroV Jan 24 '13 at 17:24
@AlvaroV - both actions will do the same :) , when you click on the tab you will get tab Id also. - This updated one without button - http://jsfiddle.net/WnDV9/3/ – Muhammad Hani Jan 24 '13 at 17:29
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')); } }); });` – AlvaroV Jan 24 '13 at 17:42

score 4 · Answer 3 · answered Dec 06 '13 at 06:06

4

This works for me

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

answered Dec 06 '13 at 06:06

Eelco

39
3

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. – Tony Carbone Mar 05 '14 at 03:15

Pitchai P · Answer 4 · 2013-01-24T15:54:57.623

2

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

edited Jan 24 '13 at 15:54

answered Jan 24 '13 at 13:21

Pitchai P

1,317
10
22

1

thanks but select event has been removed in jquery ui 1.10 http://jqueryui.com/upgrade-guide/1.10/#removed-select-event-use-beforeactivate – AlvaroV Jan 24 '13 at 15:34
thanks man.. But if you wanted to know how to get the href, hope "$(ui.tab).attr('href')" would have helped u. – Pitchai P Jan 24 '13 at 15:53
it should be: $(ui.newTab).attr('href') -> http://api.jqueryui.com/tabs/#event-beforeActivate anyway, it returns nothing – AlvaroV Jan 24 '13 at 16:56

score 1 · Answer 5 · answered Sep 28 '13 at 00:36

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.

score 1 · Answer 6 · answered Oct 14 '13 at 05:01

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)
    }
});

score 1 · Answer 7 · edited Oct 20 '14 at 07:09

1

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

edited Oct 20 '14 at 07:09

Soner Gönül

97,193
102
206
364

answered Oct 20 '14 at 06:58

Nikhil Raj k

11
1

score 0 · Answer 8 · answered Jan 27 '13 at 12:00

0

Use aria-controls

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

answered Jan 27 '13 at 12:00

Marius D

1
1

score 0 · Answer 9 · answered Jan 13 '15 at 03:53

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.

score 0 · Answer 10 · edited Mar 11 '15 at 07:00

0

It works for me

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

edited Mar 11 '15 at 07:00

answered Mar 11 '15 at 05:52

krunal chavda

1

Add some explanation to your answer please. – Alex Char Mar 11 '15 at 09:14

score 0 · Answer 11 · answered Jan 20 '16 at 09:49

0

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.

answered Jan 20 '16 at 09:49

Frank

1,901
20
27

Get the ID of the tab (div) being activated

11 Answers11

Linked