複数のタブ切り替えにも対応したjQueryを実装する方法

今回は、ホームページ制作においてタブ切り替え（タブメニュー）を実装する機会があるかと思いますが、複数設置した場合に「挙動がおかしい…」「1つのタブを動かすと他のも動いてしまう…」といったケースに躓いている方に向けたタブ切り替えの複数設置の実装方法をご紹介します。

jQueryでタブ切り替えの実装例

まずは、1つのタブ切り替えを実装する方法からご紹介しておきます。

タブA
タブB
タブC

ここにタブAの内容

ここにタブBの内容

ここにタブCの内容

タブ切り替えHTML

<ul class="tabMenu">
  <li class="active">タブA</li>
  <li>タブB</li>
  <li>タブC</li>
</ul>
<div class="tabContent active">
  <p>ここにタブAの内容</p>
</div>
<div class="tabContent">
  <p>ここにタブBの内容</p>
</div>
<div class="tabContent">
  <p>ここにタブCの内容</p>
</div>

タブとコンテンツは必ず同じ数を準備します。そして初めに表示させたい箇所にそれぞれアクティブな状態を示す「class="active"」を指定しておきます。

タブ切り替えjQuery

$('.tabMenu li').click(function () {
  // クリックされたタブが何番目なのかを取得
  var num = $(this).index();
  // タブの表示・非表示の切り替え
  $('.tabMenu li').removeClass('active');
  $(this).addClass('active');
  // コンテンツの表示・非表示の切り替え
  $('.tabContent').removeClass('active').eq(num).addClass('active');
});

まずは、クリックされたタブが何番目なのかを取得します。

次にタブ全体を非表示にして、クリックされたタブを表示します。さらにコンテンツ全体を非表示にして、クリックされたタブと同じインデックス番号のコンテンツを表示させます。

camoさん

これで1つの場合のタブ切り替えの実装が完了しました。
では、次が本題のタブ切り替えを複数設置した場合の実装方法です。

jQueryで複数設置に対応したタブ切り替えの実装例

1つのタブ切り替えの実装例でのやり方で複数設置した場合は、1つのタブ切り替えを動作させると他のタブ切り替えまで連動して切り替えをしてしまい思った通りに動作してくれません。

では、どうしたら正常に動作してくれるのかというとそれぞれのタブ切り替えのグループに親要素をつくってあげることで解決します。もちろん、jQueryのコードにも親要素の判定を追加する必要があります。

タブA
タブB
タブC

ここにタブAの内容

ここにタブBの内容

ここにタブCの内容

タブD
タブE
タブF

ここにタブDの内容

ここにタブEの内容

ここにタブFの内容

複数タブ切り替えHTML

<div class="tabGroup">
  <ul class="tabMenu">
    <li class="active">タブA</li>
    <li>タブB</li>
    <li>タブC</li>
  </ul>
  <div class="tabContent active">
    <p>ここにタブAの内容</p>
  </div>
  <div class="tabContent">
    <p>ここにタブBの内容</p>
  </div>
  <div class="tabContent">
    <p>ここにタブCの内容</p>
  </div>
</div>
<div class="tabGroup">
  <ul class="tabMenu">
    <li class="active">タブD</li>
    <li>タブE</li>
    <li>タブF</li>
  </ul>
  <div class="tabContent active">
    <p>ここにタブDの内容</p>
  </div>
  <div class="tabContent">
    <p>ここにタブEの内容</p>
  </div>
  <div class="tabContent">
    <p>ここにタブFの内容</p>
  </div>
</div>

重要なのは、それぞれのタブ切り替えを「tabGroup」とした親要素で囲ってあげることです。

複数タブ切り替えjQuery

$('.tabMenu li').click(function () {
  // 親要素を指定
  var group = $(this).parents('.tabGroup');
  var tabMenu = group.find('.tabMenu li');
  var tabContent = group.find('.tabContent');
  //クリックされたタブが何番目なのかを取得
  var num = $(this).index();
  //タブの表示・非表示の切り替え
  tabMenu.removeClass('active');
  $(this).addClass('active');
  //コンテンツの表示・非表示の切り替え
  tabContent.removeClass('active').eq(num).addClass('active');
});

今回のjQueryはクリックされたタブの親要素を判定してから表示・非表示の切り替えを行っています。親要素を指定することでそれぞれのタブ切り替えにのみ動作するようになります。