How do I switch to a new jQuery UI tab programmatically?

For jQuery UI 1.9+, the select method has been deprecated in the API. In 1.9+, you need to use option and active, instead.

From the documentation:

Old API:

// Activate the third tab (in a zero-based index)$( "#tabs" ).tabs( "select", 2 );

New API:

// Activate the third tab (in a zero-based index)$( "#tabs" ).tabs( "option", "active", 2 );

Try changing your code to this:

var $tabs = $('#tabs').tabs({ selected: 0, disabled: [1,2] }); $("#addstudent").click(function(){   $tabs.tabs('enable', 1).tabs('select', 1).tabs('disable', 0);        }); $("#confirm").click(function(){    $tabs.tabs('enable', 2).tabs('select', 2).tabs('disable', 1);    }); 

JSBin Example

@Aaron Sherman already answered your question. Here is the detailed step.

Here is JS part of the code:

$(document) .ready(function() {    $("#tabs").tabs();     $(".btnNext").click(function () {            $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );        });        $(".btnPrev").click(function () {            $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );        });});

Here are the "a href" tags to be added in your tabs div

Example:

<div id="tabs-1"><a class="myButton btnNext" style="color:white;">Next Tab</a></div><div id="tabs-2"><a class="myButton btnPrev" style="color:white;">Previous Tab</a><a class="myButton btnNext" style="color:white;">Next Tab</a></div><div id="tabs-3"><a class="myButton btnPrev" style="color:white;">Previous Tab</a></div>