How do I switch to a new jQuery UI tab programmatically?
@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>
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
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 );