如何以编程方式切换到新的jQueryUI选项卡？

我正在与jQueryUI选项卡构建一个类似“签出”的交互。这意味着单击第一个选项卡上的按钮将停用第一个选项卡并移动到下一个选项卡。我一直在梳理有关Stack Overflow的帖子，但我尝试的东西似乎都不管用。我使用的是jQuery UI 1.8，代码如下：

$（文档）.ready（函数（）{
var$tabs=$（'#tabs'）.tabs（{selected:0}）；
$tabs.tabs（'option'，'selected'，0）；
$（“#制表符”）.tabs（{已禁用：[1,2]}）；
$（“#添加学生”）。单击（函数（）{
$tabs.tabs（'option'，'selected'，1）；
$（“#制表符”）.tabs（{disabled:[0,2]}）；
}); 
$（“#确认”）。单击（函数（）{
$tabs.tabs（'option'，'selected'，2）；
$（“#制表符”）.tabs（{disabled:[0,1]}）；
}); 
});






添加学生
证实
表3，索引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);    
}); 

对于jQueryUI1.9+，API中的。在1.9+中，您需要使用
选项
和
活动

从文件中：

旧API:

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

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

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

新API:

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

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

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

@亚伦·谢尔曼已经回答了你的问题。下面是详细的步骤

下面是代码的JS部分：

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

$(document) .ready(function() {
    $("#tabs").tabs(); 

    $("#tabs").tabs( "option", "disabled", [ 1, 2 ] );

    $(".btnNext").click(function () {
        $("#tabs").tabs( "enable", $("#tabs").tabs('option', 'active')+1 );
        $("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
    });

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

以下是要添加到选项卡div中的“a href”标记

示例：

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

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

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


下一页
上一选项卡
下一页
上一选项卡
我修改了@Mahesh Vemuri的解决方案，添加了禁用第一步后的步骤，然后在单击“下一步”按钮后启用这些步骤的可能性：

JScode:

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

$(document) .ready(function() {
    $("#tabs").tabs(); 

    $("#tabs").tabs( "option", "disabled", [ 1, 2 ] );

    $(".btnNext").click(function () {
        $("#tabs").tabs( "enable", $("#tabs").tabs('option', 'active')+1 );
        $("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
    });

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

HTML是相同的

注意：使用此代码，单击“下一步”按钮将启用下一个选项卡（以前已禁用），但单击“上一步”按钮将不会禁用当前选项卡，以便允许用户在下一个禁用选项卡之前向后和向前进入顺序流

希望，如果选项卡包含表单的3个步骤，则只有在JS表单验证成功时才能触发“下一步”按钮。
对于新版本的jQuery，您可能需要使用下面显示的答案$（“选项卡”）。选项卡（“选项”、“活动”，2）；