CODEWITHSUNDEEP
jqueryjquery-uijquery-pluginsjquery-tabs
Alvaro
Alvaro

Reputation: 433

Get the ID of the tab (div) being activated

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>

Upvotes: 42

Views: 80089

Answers (11)

Frank
Frank

Reputation: 2043

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.

Upvotes: 0

krunal chavda
krunal chavda

Reputation: 1

It works for me

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

Upvotes: 0

Michael
Michael

Reputation: 311

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.

Upvotes: 0

Nikhil Raj k
Nikhil Raj k

Reputation: 11

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

Upvotes: 1

Eelco
Eelco

Reputation: 39

This works for me

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

Upvotes: 4

wildbill
wildbill

Reputation: 11

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

Upvotes: 1

MoonStom
MoonStom

Reputation: 2903

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.

Upvotes: 1

thenickdude
thenickdude

Reputation: 1660

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

Upvotes: 59

Marius D
Marius D

Reputation: 1

Use aria-controls

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

Upvotes: 0

Muhammad Hani
Muhammad Hani

Reputation: 8664

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

Upvotes: 22

Pitchai P
Pitchai P

Reputation: 1317

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

Upvotes: 2

Related Questions