jquery - 如何以编程方式切换到新的 jQuery UI 选项卡？

Question

我正在构建一个类似于 jQuery UI 选项卡的“ checkout ”交互。这意味着单击第一个选项卡上的按钮将停用第一个选项卡并移至下一个选项卡。我一直在梳理 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 method has been deprecated在 API 中。在 1.9+ 中，您需要使用 option 和 active。

来自文档:

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