'How to Set Active Tab in jQuery Ui

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>
jqueryjquery-ui


Solution 1:[1]

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:[2]

Simple jQuery solution - find the <a> element where href="x" and click it:

$('a[href="#tabs-2"]').click();

Solution 3:[3]

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:[4]

Inside your function for the click action use 

$( "#tabs" ).tabs({ active: # });

Where # is replaced by the tab index you want to select.

Solution 5:[5]

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:[6]

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:[7]

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:[8]

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:[9]

just trigger a click, it's work for me:

$("#tabX").trigger("click");

Solution 10:[10]

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:[11]

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";

Related Questions