jQueryでタブ切り替えを実装（複数設置にも対応）

ホームページ制作でよく使用することが多いのが、タブ切り替えの実装です。
タブメニューをクリックすることで対応したコンテンツが切り替わる仕様ですが、HTMLコードもjQueryもどちらも簡単なコードで解決することが出来ます。

jQueryタブ切り替えの実装例

例としてメニューとコンテンツを3つの場合の表示です。それぞれのメニューをクリックすることで該当するコンテンツに切り替わります。

See the Pen タブ切り替え by TAKAMI DESIGN (@takami_design) on CodePen.

HTMLマークアップ

メニューとコンテンツは必ず同じ数だけ設定します。デフォルトの状態でそれぞれ1番目のみをアクティブな状態に設定します。

<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>

jQueryで1番目をアクティブな状態にすることも可能ですが、制作するものによっては2番目をアクティブな状態にしたい場合などがあるのでコードで設定する場合でご紹介しておきます。

jQueryコード

$(function () {
  $('.tabMenu li').click(function () {
    //クリックされたタブが何番目なのかを取得
    var num = $('.tabMenu li').index(this);
    //メニューとコンテンツの非アクティブ化・アクティブ化
    $('.tabMenu li').removeClass('active');
    $(this).addClass('active');
    $('.tabContent').removeClass('active').eq(num).addClass('active');
  });
});

まず、メニューがクリックされた場合にクリックされたものが何番目なのかを取得します。

その後に、クリックされたメニューとコンテンツ全体を非アクティブ化にして、クリックされたメニューと同じインデックス番号のコンテンツをアクティブな状態にします。

同じページに複数のタブ切り替えを設置する場合

通常のタブ切り替えでのコードでは、複数のタブ切り替えを設置した場合、切り替えのタイミングがすべて連動してしまいます。
そこで、各コンテンツを1まとめにすることで切り替えのタイミングをバラバラにすることが出来ます。

See the Pen タブ切り替え（複数設置） by TAKAMI DESIGN (@takami_design) on CodePen.

HTMLマークアップ

<ul class="tabMenu">
  <li class="active">メニューA</li>
  <li>メニューB</li>
  <li>メニューC</li>
</ul>
<div class="tabContents">
  <div class="tabContent active">
    <p>コンテンツA</p>
  </div>
  <div class="tabContent">
    <p>コンテンツB</p>
  </div>
  <div class="tabContent">
    <p>コンテンツC</p>
  </div>
</div>
<ul class="tabMenu">
  <li class="active">メニューD</li>
  <li>メニューE</li>
  <li>メニューF</li>
</ul>
<div class="tabContents">
  <div class="tabContent active">
    <p>コンテンツD</p>
  </div>
  <div class="tabContent">
    <p>コンテンツE</p>
  </div>
  <div class="tabContent">
    <p>コンテンツF</p>
  </div>
</div>

各tabContentをtabContentsで囲ってあげることが重要です。

jQueryコード

$(function () {
  $('.tabMenu li').click(function () {
    //クリックされたタブが何番目なのかを取得
    var num = $('.tabMenu li').index(this);
    //メニューとコンテンツの非アクティブ化・アクティブ化
    $(this).addClass('active').siblings('li').removeClass('active');
    $(this).closest('.tabMenu').next('.tabContents').find('.tabContent').removeClass('active');
    $('.tabContent').eq(num).addClass('active');
  });
});

以上のように設定することで複数設置したタブ切り替えはバラバラのタイミングで切り替えが可能になります。