How to Set Active Tab in jQuery Ui

Question

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:

Answer 1

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

Answer 2

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.

Answer 3

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