HARD DAY'S NIGHT別館

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

jQuery UI タブで選択されたタブを判定するサンプル

jQuery UI タブが選択されると activate イベントが発生します。

このサンプルでは、そのイベント発生時にタブのインデックス取得して、メッセージ表示をします。

タブをクリックください。


bind メソッドで 'tabsactivate' をバインド

1番目のタブです。

2番目のタブです。

3番目のタブです。



activate イベントを使用する

4番目のタブです。

5番目のタブです。

6番目のタブです。

コード


function displayMessage(str) {
    var msg = $(".messageBar");
    
    msg
        .text(str)
        .addClass("ui-state-highlight");
    setTimeout(function() {
        msg.removeClass("ui-state-highlight", 1500);
    }, 500);
}

$(function() {
    $("#tabs").tabs();
    // タブの選択イベント
    $("#tabs").bind('tabsactivate', function(event, ui) {
        // クリックされたタブのインデックス
        // インデックスは 0 から始まるので + 1
        var i = ui.newTab.index() + 1;

        displayMessage(i + " 番目のタブがクリックされました。");
    });

    $("#tabs2").tabs({
        activate: function(event, ui) {
        // クリックされたタブのインデックス
        // インデックスは 0 から始まるので + 1
        var i = ui.newTab.index() + 1;

        //上のタブの表示されているタブ数を加えてインデックスとする
        i += $('#tabs ul li a:visible').length;

            displayMessage(i + " 番目のタブがクリックされました。");
        }
    });
});
	

HTMLコード


<p class="messageBar" style="margin-top: 20px; border: 1px solid transparent; padding: 0.3em;">
タブをクリックください。
</p>
<br/>
<h4>bind メソッドで 'tabsactivate' をバインド</h4>
<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/>
<br/>
<h4>activate イベントを使用する</h4>
<div id="tabs2">
    <ul>
        <li><a href="#tabs-4">4番目のタブ</a></li>
        <li><a href="#tabs-5">5番目のタブ</a></li>
        <li><a href="#tabs-6">6番目のタブ</a></li>
    </ul>

    <div id="tabs-4">
        <p>4番目のタブです。</p>
    </div>
    <div id="tabs-5">
        <p>5番目のタブです。</p>
    </div>
    <div id="tabs-6">
        <p>6番目のタブです。</p>
    </div>
</div><!-- end of tabs2 -->