HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jQuery UI タブで指定したタブを無効にする

jQuery UI タブで指定したインデックスのタブを無効にして選択出来なくします。また、無効になったタブを有効にします。

初期状態で2番目と3番目を無効にして、ボタンクリックで2番目を有効・無効にします。

1番目のタブです。

2番目のタブです。

3番目のタブです。


コード


$(function() {
    $("#check").button();

    $("#tabs").tabs();

    // 2番目と3番目のタブを無効にする
    $("#tabs").tabs("option", "disabled", [1,2]);

    // 2番目のタブを有効にする
    $("#check").click(function() {
        var tabIndex =  1;  // 2番目タブのインデックス

        // 無効化されているタブを調べる
        var disabled = $("#tabs").tabs("option", "disabled");
        // 無効なタブの配列 [1,2] がリターンされる
        if (tabIndex in disabled)
        {
            $("#tabs").tabs("enable", tabIndex);                // タブの有効化
            $("#tabs").tabs("option", "active", tabIndex);      // 有効化したタブをアクティブにする
            $("#label span").text('無効化');                    // ボタンのラベル テキスト変更
        }
        else
        {
            $("#tabs").tabs("option", "active", tabIndex - 1);  // 1番目のタブをアクティブにする
            $("#tabs").tabs("disable", tabIndex);               // タブの無効化
            $("#label span").text('有効化');                    // ボタンのラベル テキスト変更
        }
    });
});
	

HTMLコード


<div id="tabs">
    <ul>
        <li><a href="#tabs-1">1番目のタブ</a></li>
        <li><a href="#tabs-2">2番目のタブ</a></li>
        <li><a href="#tabs-3">3番目のタブ</a></li>
    </ul>

    <div id="tabs-1">
        <p>1番目のタブです。</p>
    </div>
    <div id="tabs-2">
        <p>2番目のタブです。</p>
    </div>
    <div id="tabs-3">
        <p>3番目のタブです。</p>
    </div>
</div> <!-- end of tabs -->
<br/>
<div class="toolbar">
    <input type="checkbox" id="check"/><label id="label" for="check">有効</label>
</div>