最終更新日: 2021年2月15日

    Bootstrapでタブ切り替え時のイベントを取得する方法！

    Bootstrapでは便利にタブを切り替えることができます。またその際に、タブのイベントを取得することで、さらに複雑な処理も行えるようになります。今回はBootstrapでタブ切り替え時のイベントを取得する方法を解説します。

    コンテンツ [表示]

    1. 1Bootstrapでタブ切り替え時のイベントを取得する方法

    Bootstrapでタブ切り替え時のイベントを取得する方法

    今回はBootstrapでタブ切り替え時のイベントを取得する方法を解説します。

    JavaScriptを用いてBootstrapのタブ切り替え時のイベントを取得します。

    使用目的としては、ページの再表示や移動などを行うとタブが初期化され毎回戻ってしまい、再度選択しなければいけません。そこで前の状態を維持するために変数として保存しておき、そのタブが表示されるようにするなどです。


    以下のサンプルコードのように記述します。

    index.html

    <ul class="nav nav-tabs" id="myTab"> 　<!--タブ-->
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#about" data-toggle="tab">About</a></li>
</ul>

<div class="tab-content">  <!--コンテンツの内容-->
  <div class="tab-pane active" id="home">Homeの内容</div>
  <div class="tab-pane" id="profile">Profileの内容</div>
  <div class="tab-pane" id="messages">Messagesの内容</div>
  <div class="tab-pane" id="about">Aboutの内容</div>
</div>

    index.js

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var activated_tab = e.target // 現在のタブ
  var previous_tab = e.relatedTarget // 以前のタブ
  // 以下処理を記述
})
    GeekHive採用サイト

    関連記事