Bootstrap 3 タブの奥深い活用術 - イベント、コンテンツ更新、Ajax リクエスト

2024-04-13

Bootstrap 3 の jQuery イベントを使用したアクティブなタブ変更のプログラミング解説

イベントの仕組み

アクティブなタブ変更イベントは、以下の要素とイベントによって構成されています。

要素:
- .nav-tabs クラスを持つナビゲーションタブ
- .tab-content クラスを持つコンテンツ領域
イベント:
- show.bs.tab イベント: アクティブなタブが変更される直前に発生

イベントハンドラを設定するには、以下のコードを使用します。

$(document).ready(function() {
  $('.nav-tabs a').on('show.bs.tab', function(event) {
    // アクティブなタブが変更される直前に実行する処理
    var activeTab = $(event.target).attr('href');
    console.log(activeTab + ' タブがアクティブになりました');
  });

  $('.nav-tabs a').on('shown.bs.tab', function(event) {
    // アクティブなタブが変更された直後に実行する処理
    var activeTab = $(event.target).attr('href');
    console.log(activeTab + ' タブがアクティブになりました');
  });
});

このコードでは、show.bs.tab と shown.bs.tab イベントに対して、それぞれ以下の処理を実行しています。

具体的な処理の実装

上記のコードはあくまでも例であり、実際の処理は状況に応じて変更する必要があります。例えば、以下のような処理が考えられます。

アクティブなタブに応じてコンテンツを更新する
アクティブなタブに応じて Ajax リクエストを実行する
アクティブなタブに応じてフォームの入力値を処理する

これらの処理を実行するには、イベントハンドラ内で jQuery の様々なメソッドを使用することができます。

補足情報

イベントハンドラの設定以外にも、$().tab() メソッドを使用して、プログラム的にタブを操作することもできます。

Bootstrap 3 の jQuery イベントを使用したアクティブなタブ変更のサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap 3 タブ</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>Bootstrap 3 タブ</h1>

    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab">Home</a></li>
      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab">Profile</a></li>
      <li role="presentation"><a href="#messages" aria-controls="messages" role="tab">Messages</a></li>
    </ul>

    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="home">Home コンテンツ</div>
      <div role="tabpanel" class="tab-pane" id="profile">Profile コンテンツ</div>
      <div role="tabpanel" class="tab-pane" id="messages">Messages コンテンツ</div>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $('.nav-tabs a').on('show.bs.tab', function(event) {
        // アクティブなタブが変更される直前に実行する処理
        var activeTab = $(event.target).attr('href');
        console.log(activeTab + ' タブがアクティブになりました');
      });

      $('.nav-tabs a').on('shown.bs.tab', function(event) {
        // アクティブなタブが変更された直後に実行する処理
        var activeTab = $(event.target).attr('href');
        console.log(activeTab + ' タブがアクティブになりました');
      });
    });
  </script>
</body>
</html>

解説

このコードは、Bootstrap 3 で作成されたタブに jQuery イベントを設定するサンプルコードです。

主なポイントは以下の通りです。

HTML コードで、ナビゲーションタブとコンテンツ領域を定義しています。
イベントハンドラ内で、アクティブになるタブのIDを取得してコンソールに表示しています。

このコードを参考に、様々な処理を実装することができます。

Bootstrap 3 でアクティブなタブ変更を検知するその他の方法

JavaScript の MutationObserver API

MutationObserver API を使用して、DOM の変更を監視することで、アクティブなタブ変更を検知することができます。

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList' && mutation.target.classList.contains('nav-tabs')) {
      const activeTab = $('.nav-tabs .active').attr('href');
      console.log(activeTab + ' タブがアクティブになりました');
    }
  }
});

observer.observe($('.nav-tabs')[0], {
  childList: true
});

以下のコードのように、show.bs.tab イベントと shown.bs.tab イベントを直接利用することもできます。

$(document).ready(function() {
  $('.nav-tabs a').on('show.bs.tab', function(event) {
    // アクティブなタブが変更される直前に実行する処理
    var activeTab = $(event.target).attr('href');
    console.log(activeTab + ' タブがアクティブになりました');
  });

  $('.nav-tabs a').on('shown.bs.tab', function(event) {
    // アクティブなタブが変更された直後に実行する処理
    var activeTab = $(event.target).attr('href');
    console.log(activeTab + ' タブがアクティブになりました');
  });
});

カスタムイベントを使用する

以下のコードのように、カスタムイベントを使用して、アクティブなタブ変更を通知する方法もあります。

$(document).ready(function() {
  $('.nav-tabs a').on('show.bs.tab', function(event) {
    // アクティブなタブが変更される直前に実行する処理
    var activeTab = $(event.target).attr('href');
    $(document).trigger('tab.show', { activeTab: activeTab });
  });

  $(document).on('tab.show', function(event, data) {
    console.log(data.activeTab + ' タブがアクティブになりました');
  });
});