如何以编程方式切换到新的 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]});
    }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
<div id="tabs">
    <ul>
        <li><a href="#fragment-1">Student Information</a></li>
        <li><a href="#fragment-2">Confirmation</a></li>
        <li><a href="#fragment-3">Invoice</a></li>
    </ul>
    <div id="fragment-1">
        <button id="addstudent" >Add Student</button>
    </div>
    <div id="fragment-2">
        <button id="confirm" >Confirm</button>
    </div>
    <div id="fragment-3">
        tab 3, index 2
    </div>
</div>

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

Answer 1

对于 jQuery UI 1.9+，select 方法已被弃用 API。在 1.9+ 中，您需要使用 option 和 active。

从文档中：

旧 API：

// 激活第三个选项卡（在从零开始的索引中）
$( "#tabs" ).tabs( "选择", 2 );

新 API：

// 激活第三个选项卡（在从零开始的索引中）
$( "#tabs" ).tabs( "选项", "活动", 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 示例

Answer 3

@Aaron Sherman 已经回答了你的问题。这是详细步骤。

这是代码的 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 );
        });
});

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

示例：

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

Answer 4

我修改了 @Mahesh Vemuri 的解决方案，添加了禁用第一个步骤之后的可能性，然后在单击“下一步”按钮后启用它们：

JScode：

$(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 是相同的。

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

希望，如果选项卡包含表单的 3 个步骤，则只有 JS 表单验证 成功时才能触发 NEXT 按钮的操作。

Answer 5

$(function() {
    $( "#tabs" ).tabs({ activate: function(event ,ui){
        //console.log(event);
        //alert(  ui.newTab.index());
        //alert( ui.newTab.attr('li',"innerHTML")[0].getElementsByTagName("a")[0].innerHTML);

        alert( ui.newTab[0].getElementsByTagName("a")[0].innerHTML);
        //alert( this.text);
    } });
});