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>
var selectedTab = $("#TabList"). tabs(). data("selected. tabs");
$(window). load(function(){ $('#tabs-2'). trigger('click'); });
click('tabsselect', function (event, ui) { var selectedTab = $("#tabs"). tabs('option', 'active'); $("#hidLastTab"). val(selectedTab); });
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'));
}
});
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
This works for me
$( "#editor_tabs" ).tabs( {
activate: function ( event, ui ) {
$(ui.newTab.find("a").attr("href")).html("Got It");
}
});
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
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.
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)
}
});
var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With