Jquery UI选项卡,以编程方式切换到新选项卡

Question

我正在构建一个"签出",就像与jQuery UI选项卡的交互一样.这意味着单击第一个选项卡上的按钮将停用第一个选项卡并移至下一个选项卡.我一直在梳理Stack Overflow上的帖子,但我尝试的任何东西似乎都没有用.我使用的是jQuery UI 1.8,这里是代码:

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

当我单击按钮时,下一个选项卡将被解锁(因为它是可选的)但它不会禁用索引0处的选项卡并切换到索引1处的选项卡.此外,相应的面板不会显示.

Answer 1

对于JQUERY UI 1.9+,不推荐使用select方法(http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method)

(来自文档)

旧API:

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

新API:

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

Answer 2

尝试将代码更改为:

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示例