twitterbootstrapタブをいじくる

2015年6月18日更新 view: 14 view

今表示されているタブを取得するには?

動的に追加されたタブの場合

$('#page-tab').on('shown.bs.tab','a', function (e) {
var target = $(e.target).attr("href");
alert("hoge");
});

どのタブを現在開いているか表示したい

twitterbootstrap を使って、現在表示されているタブを取得したい場合がある。
また、表示されたときにイベントを実行したいとか。
そんなときは、こう。

まずはタブのhtmlから。

<ul class="nav nav-tabs">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
</div>

つづいてJS

$('.nav a[data-toggle="tab"]').on('shown', function (e) {

         alert($(e.target).attr('href'));//現在表示されているタブのhref #tab1
         alert($(e.target).attr('href'));//先ほど表示されていたタブのhref #home
      
})

これでタブが切り替わった際に、どのタブがクリックされたかを表示することが可能です。

指定したタブを表示する

スポンサードリンク

外部から タブのボタンの方を 指定し、 .tab showすることで表示できます。
coffeescript

$(document).on "click","#check-view-show",(e) ->
#   $('#check-view-btn').tab('show')
   $("a[href = '#check-view']").tab('show')
スポンサードリンク

関連記事

関連カテゴリ