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处的选项卡。此外，相应的面板不会显示。 / p>

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 的解决方案，增加了在第一个之后禁用步骤的可能性，然后在点击＆＃34; NEXT＆＃34;之后启用它们。按钮：

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：请注意，使用此代码，单击“下一步”按钮将启用下一个选项卡（先前已禁用），但单击“上一步”按钮将不会禁用当前选项卡，以便允许用户前后移动到顺序流中下一个禁用标签。

希望如果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);
    } });
});

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

5 个答案: