Bootstrap 3 タブ切り替えイベント

Bootstrap 3でアクティブタブが変更されたときのjQueryイベント

Bootstrap 3では、タブ切り替え時に特定のイベントが発動します。このイベントを利用して、タブがアクティブになったときに実行したい処理を指定することができます。

イベント名

• shown.bs.tab: タブが完全に表示されたときに発動します。

例

$(document).on('shown.bs.tab', '#myTab a[data-toggle="tab"]', function (e) {
  // アクティブタブが変更されたときの処理
  var activeTab = $(e.target).text();
  console.log('Active tab:', activeTab);
});

コード解説

1. $(document).on('shown.bs.tab', '#myTab a[data-toggle="tab"]', function (e) {})

   • $(document).on: イベントをドキュメント全体に対してバインドします。
   • 'shown.bs.tab': イベント名です。
   • '#myTab a[data-toggle="tab"]': イベントを適用するセレクタです。#myTabというIDを持つタブのリンクに適用されます。
   • function (e) {}: イベントハンドラー関数です。eはイベントオブジェクトです。

2. var activeTab = $(e.target).text();

   • アクティブになったタブのテキストを取得します。

3. console.log('Active tab:', activeTab);

   • コンソールにアクティブタブのテキストを出力します。

応用例

• タブごとに異なる処理を実行する。
• タブの内容を動的に読み込む。
• タブがアクティブになったときに別の要素を表示または非表示にする。

注

• イベントハンドラー関数内で必要な処理を記述してください。
• #myTabは実際のタブコンテナのIDに置き換えてください。

$(document).on('shown.bs.tab', '#myTab a[data-toggle="tab"]', function (e) {
  // アクティブタブが変更されたときの処理
  var activeTab = $(e.target).text();
  console.log('Active tab:', activeTab);

  // タブごとに異なる処理を実行する例
  if (activeTab === 'Tab 1') {
    // Tab 1がアクティブになったときの処理
    $('#content1').show();
    $('#content2').hide();
  } else if (activeTab === 'Tab 2') {
    // Tab 2がアクティブになったときの処理
    $('#content1').hide();
    $('#content2').show();
  }
});

代替方法

直接タブ要素を監視する

$('#myTab a[data-toggle="tab"]').on('click', function (e) {
  // タブがクリックされたときの処理
  var activeTab = $(this).text();
  console.log('Active tab:', activeTab);
});

タブコンテナのイベントを監視する

$('#myTab').on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
  // タブが完全に表示されたときの処理
  var activeTab = $(this).text();
  console.log('Active tab:', activeTab);
});

• $('#myTab a[data-toggle="tab"]').on('click', function (e) {})
  • $('#myTab a[data-toggle="tab"]'): タブ要素のセレクタです。
  • on('click', function (e) {}): タブ要素がクリックされたときにイベントハンドラー関数を呼び出します。

• $('#myTab').on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {})
  • $('#myTab'): タブコンテナのセレクタです。
  • on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {}): タブコンテナ内でタブが完全に表示されたときにイベントハンドラー関数を呼び出します。

どちらの方法を使うべきか

• タブコンテナのイベントを監視する方法は、タブコンテナ内のすべてのタブ要素に対してイベントを適用したい場合に適しています。
• 直接タブ要素を監視する方法の方がシンプルで、特定のタブ要素に対してのみイベントを適用したい場合に適しています。