如何以编程方式切换到新的 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+，API 中的 select method has been deprecated。在 1.9+ 中，您需要改用 option 和 active。

来自文档：

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

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 的解决方案，增加了禁用第一个步骤之后的步骤的可能性，然后在单击“下一步”按钮后启用它们：

JS代码：

$(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 按钮不会禁用当前选项卡，以允许用户向后和向前进入顺序流，直到下一个禁用的标签。

希望如果 Tabs 包含表单的 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);
    } });
});