twitterbootstrap アクティブなタブを取得

2014年10月12日更新 view: 1039 view
photoBy: http://pillaticos.com/wp-content/uploads/2012/06/twitter-bootstrap.png

タブをクリックしたときにどのタブが選択されているか

以下の命令でタブをクリックしたら動く

スポンサードリンク
$(function(){ 
    $('a[data-toggle="tab"]').on('shown', function (e) {
         // クリックされたタブ名はこんな感じで取得する。
         var tabName = e.target.href;
         var items = tabName.split("#"); // activated tab
         //e.relatedTarget // 直前のタブ取得可能らしい
    });
});

今、どのタブが開かれているか

上記だとタブをクリックしたときにしか動かない。
じゃあ、クリックせずに今どのタブが開かれているかを知りたいときは

$(function(){ 
    $('a[data-toggle="tab"]').each(function(i){
        if($(this).parent().attr("class") == 'active'){
            alert($(this).attr("href"));
        }
    });
});

こんな感じですね。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

9月21日 ( 木 ) にアクセスが多かった記事はこちら!