タブ切り替えで特定の場所にクラスを追加する方法

Webサイトでタブ切り替え機能を実装することは、
情報の整理やユーザーエクスペリエンスの向上に非常に有効です。
今回は、タブ切り替え時に特定の要素にタブごとに異なるクラスを追加する方法をご紹介します。
これにより、タブごとに異なるスタイルを適用することが可能になります。

基本のHTML構造

まず、基本のHTML構造を作成します。
以下のように、タブボタンとタブコンテンツを含むラッパーを用意し、
タブごとに異なるクラスを追加するターゲット要素を配置します。

<div class="my-tab-wrap">
  <button class="my-tab-btn">タブ1</button>
  <button class="my-tab-btn">タブ2</button>
  <button class="my-tab-btn">タブ3</button>

  <div class="my-tab-contents">コンテンツ1</div>
  <div class="my-tab-contents">コンテンツ2</div>
  <div class="my-tab-contents">コンテンツ3</div>
</div>

<section class="my-column-part">
  <!-- ここにクラスが追加されます -->
</section>

JavaScriptの実装

次に、jQueryを使用してタブ切り替えを実装します。
タブの切り替え時に.my-column-part要素にクラスを追加するコードを以下に示します。

jQuery(document).ready(function ($) {
  // tab切り替え関数
  function switchTab(index) {
    var thisTabWrap = $(".my-tab-wrap");
    var thisTabBtn = thisTabWrap.find(".my-tab-btn");
    var thisTabContents = thisTabWrap.find(".my-tab-contents");
    var currentClass = "current";
    var targetClassPrefix = "tab-target-";

    // my-tab-btn current 切り替え
    thisTabBtn.removeClass(currentClass);
    thisTabBtn.eq(index).addClass(currentClass);

    // my-tab-contents 切り替え
    thisTabContents.removeClass(currentClass);
    thisTabContents.eq(index).addClass(currentClass);

    // my-column-part のクラスを切り替え
    $(".my-column-part").removeClass(function (index, className) {
      return (className.match(/(^|\s)tab-target-\S+/g) || []).join(' ');
    });
    $(".my-column-part").addClass(targetClassPrefix + index);
  }

  // 初期表示のタブをクエリパラメータから取得して設定
  function getTabFromQuery() {
    var urlParams = new URLSearchParams(window.location.search);
    var tabIndex = urlParams.get("tab");
    if (tabIndex !== null) {
      var index = parseInt(tabIndex, 10);
      if (!isNaN(index) && index >= 0 && index < $(".my-tab-btn").length) {
        switchTab(index);
      }
    }
  }

  // tab切り替え
  $(".my-tab-btn").click(function () {
    var thisElmIndex = $(".my-tab-btn").index(this);
    switchTab(thisElmIndex);
  });

  // ページロード時にクエリパラメータからタブを切り替え
  getTabFromQuery();
});

解説

switchTab 関数

この関数は、指定されたインデックスに基づいてタブを切り替え、以下の操作を行います。

タブボタンのクラス切り替え

現在のタブボタンにcurrentクラスを追加し、他のボタンからは削除します。

タブコンテンツのクラス切り替え

現在のタブコンテンツにcurrentクラスを追加し、他のコンテンツからは削除します。

ターゲット要素のクラス切り替え

.my-column-part要素から既存のtab-target-*クラスを削除し、新しいクラスを追加します。

getTabFromQuery 関数

この関数は、URLのクエリパラメータからタブのインデックスを取得し、
ページロード時に対応するタブを表示します。

イベントリスナー

タブボタンのクリックイベントをキャッチし、
クリックされたボタンのインデックスに基づいてタブを切り替えます。

まとめ

この方法を使用することで、タブ切り替え時に特定の要素にタブごとに
異なるクラスを追加することができます。
これにより、タブごとに異なるスタイルや機能を簡単に実装できます。
ぜひ、自分のプロジェクトに取り入れてみてください。

Favorite