web-dev-qa-db-ja.com

プログラムで新しいjQuery UIタブに切り替えるにはどうすればよいですか？

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のタブに切り替わりません。また、対応するパネルは表示されません。

jqueryjquery-uijquery-ui-tabs
37
Faiyet

コードを次のように変更してみてください。

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

17
Richard Dalton

JQuery UI 1.9+の場合、APIの selectメソッドは廃止されました 。 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 );
94
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>
3
Mahesh Vemuri

@ 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：このコードでは、[次へ]ボタンをクリックすると次のタブが有効になります（以前は無効）が、[戻る]ボタンをクリックしても現在のタブは無効になりません。次の無効化されたタブまでの連続フロー

願わくば、タブにフォームの3つのステップが含まれている場合、JSフォーム検証が成功する場合にのみ、NEXTボタンのアクションを起動できます。

2
Luca Detomi
$(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);
    } });
});
1
Milind Morey