How to Set Active Tab in jQuery Ui
JqueryJquery UiJquery Problem Overview
Can you please let me know how I can set the active tab in jquery ui with a button click out of the tabs?
I have a button like:
<input id="action" type="submit" value="Go to Action">
and here is the code,
<script>
$(function() {
$( "#tabs" ).tabs();
$( "#action" ).on("click", function(){});
});
<div id="tabs">
<ul>
<li><a href="#tabs-1">Description</a></li>
<li><a href="#tabs-2">Action</a></li>
<li><a href="#tabs-3">Resources</a></li>
<li><a href="#tabs-4">Settings</a></li>
</ul>
<div id="tabs-1">
<p>Description content</p>
</div>
<div id="tabs-2">
<p>Action content</p>
</div>
<div id="tabs-3">
<p>Resources content</p>
</div>
<div id="tabs-4">
<p>Settings </p>
</div>
</div>
Jquery Solutions
Solution 1 - Jquery
Inside your function for the click action use
$( "#tabs" ).tabs({ active: # });
Where # is replaced by the tab index you want to select.
Edit: change from selected to active, selected is deprecated
Solution 2 - Jquery
Simple jQuery solution - find the <a>
element where href="x"
and click it:
$('a[href="#tabs-2"]').click();
Solution 3 - Jquery
Just to clarify in complete detail. This is what works with the current version of jQuery Ui
$( "#tabs" ).tabs( "option", "active", # );
where # is the index of the tab you want to make active.
Solution 4 - Jquery
Inside your function for the click action use
$( "#tabs" ).tabs({ active: # });
Where #
is replaced by the tab index you want to select.
Solution 5 - Jquery
I know this is an old question. But I think the way to change the selected tab have changed slight
The way to change the active tab now is by giving active the index of the tab. Note the index starts at 0 not 1. To make the second tab active you will use the the index 1.
//this will select your first tab
$( "#tabs" ).tabs({ active: 0 });
Solution 6 - Jquery
If you want to set the active tab by ID instead of index, you can also use the following:
$('#tabs').tabs({ active: $('#tabs ul').index($('#tab-101')) });
Solution 7 - Jquery
You can use this:
$(document).ready(function() {
$("#tabs").tabs();
$('#action').click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
});
Also consider changing the input type as button
instead of submit
unless you want to submit the page.
Solution 8 - Jquery
HTML: First you have o save the post tab index
<input type="hidden" name="hddIndiceTab" id="hddIndiceTab" value="<?php echo filter_input(INPUT_POST, 'hddIndiceTab');?>"/>
JS
$( "#tabs" ).tabs({
active: $('#hddIndiceTab').val(), // activate the last tab selected
activate: function( event, ui ) {
$('#hddIndiceTab').val($( "#tabs" ).tabs( "option", "active" )); // save the tab index in the input hidden element
}
});
Solution 9 - Jquery
just trigger a click, it's work for me:
$("#tabX").trigger("click");
Solution 10 - Jquery
I'd like to post this one-liner as a solution, as in the reply posted to Carl's approach:
$('#tabs>ul:first>li').index( $('a[href="'+window.location.hash+'"]').closest('li') );
Greetings
Solution 11 - Jquery
If you want to active tab 2 from tab 1, do the following
$($("#tabs").find("li")[0])[0].className = "nav-item"; // tab 1
$($("#tabs").find("li")[1])[0].className = "nav-item active"; // tab 2
var aTab = $('#tabs-2'); // tab 2 content div
aTab[0].className = "tab-pane active";