Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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> 
like image 503
AlvaroV Avatar asked Jan 24 '13 13:01

AlvaroV


People also ask

How to get active tab ID in jQuery?

var selectedTab = $("#TabList"). tabs(). data("selected. tabs");

How do I make tab active on button click?

$(window). load(function(){ $('#tabs-2'). trigger('click'); });

How do I know which tab is clicked in jquery?

click('tabsselect', function (event, ui) { var selectedTab = $("#tabs"). tabs('option', 'active'); $("#hidLastTab"). val(selectedTab); });


7 Answers

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'));
  }
});
like image 160
thenickdude Avatar answered Oct 13 '22 08:10

thenickdude


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

like image 42
Muhammad Hani Avatar answered Oct 13 '22 08:10

Muhammad Hani


This works for me

$( "#editor_tabs" ).tabs( { 
    activate: function ( event, ui ) {
        $(ui.newTab.find("a").attr("href")).html("Got It");
    }
});
like image 23
Eelco Avatar answered Oct 13 '22 07:10

Eelco


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

like image 44
Pitchai P Avatar answered Oct 13 '22 08:10

Pitchai P


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.

like image 29
MoonStom Avatar answered Oct 13 '22 06:10

MoonStom


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)
    }
});
like image 43
wildbill Avatar answered Oct 13 '22 07:10

wildbill


var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);
like image 44
Nikhil Raj k Avatar answered Oct 13 '22 07:10

Nikhil Raj k