【jQuery】タブ切り替えを実装【複数設置対応】

サイトにタブメニューを表示する機会があると思いますが、場合によってはページ内で複数箇所に設置したい時もあるのではないでしょうか。

今回は複数設置に対応したタブの切り替えをjQueryを使って実装する方法をお伝えしますので、是非サイト作りに役立てて下さい。

DEMOはこちら

実装方法

以下のHTMLとCSS、jQueryを用意します。

HTML

<div class="tab-wrap">
  <ul>
    <li class="tab-btn show">タブ1</li>
    <li class="tab-btn">タブ2</li>
  </ul>
  <div class="tab-contents show">
    <p>これはタブ1の中身です。</p>
  </div>
  <div class="tab-contents">
    <p>タブ2の中身。</p>
  </div>
</div>

<div class="tab-wrap">
  <ul>
    <li class="tab-btn show">タブ3</li>
    <li class="tab-btn">タブ4</li>
  </ul>
  <div class="tab-contents show">
    <p>これはタブ3の中身です。</p>
  </div>
  <div class="tab-contents">
    <p>タブ4の中身。</p>
  </div>
</div>

CSS

.tab-wrap{
  background-color: #fff;
}

.tab-wrap ul {
  display: flex;
  background: #eee;
}

.tab-btn {
  width: 50%;
  padding: 10px 0;
  text-align: center;
  list-style: none;
  cursor: pointer;
}

.tab-btn.show {
  background: #333;
  border-top: 2px solid #333;
  color: #fff;
}

.tab-contents {
  display: none;
}

.tab-contents.show {
  display: block;
  padding: 20px;
}

jQuery

$(function() {
  $('.tab-btn').on('click', function() {
    var tabWrap = $(this).parents('.tab-wrap');
    var tabBtn = tabWrap.find(".tab-btn");
    var tabContents = tabWrap.find('.tab-contents');
    tabBtn.removeClass('show');
    $(this).addClass('show');
    var elmIndex = tabBtn.index(this);
    tabContents.removeClass('show');
    tabContents.eq(elmIndex).addClass('show');
  });
});

jQueryの詳細

ではここからはjQueryの内容を1行ずつ説明していきます。

2行目

「.tab-btnをクリックしたら以下の処理を実行する」という指定です。

jQuery

$('.tab-btn').on('click', function() {
    //　ここに処理内容を記述
});

3行目

クリックしたタブが含まれている.tab-wrapを、tabWrapに代入します。

複数箇所に設置するための処理です。

jQuery

var tabWrap = $(this).parents('.tab-wrap');

4行目

tabWrapの中の.tab-btnを、tabBtnに代入します。

jQuery

var tabBtn = tabWrap.find('.tab-btn');

5行目

tabWrapの中の.tab-contentsを、tabContentsに代入します。

jQuery

var tabContents = tabWrap.find('.tab-contents');

6行目

tabBtnについている.showを、一旦削除します。

jQuery

tabBtn.removeClass('show');

7行目

クリックされたタブに、クラス名.showを追加します。

jQuery

$(this).addClass('show');

8行目

クリックされたタブの順番を、elmIndexに代入します。

jQuery

var elmIndex = tabBtn.index(this);

9行目

tabContentsについている.showを、一旦削除します。

jQuery

tabContents.removeClass('show');

10行目

クリックしたタブと同じインデックス番号をもつコンテンツに、クラス名.showを追加します。

jQuery

tabContents.eq(elmIndex).addClass('show');

まとめ

複数設置に対応したタブ切り替えの記事はいかがでしたか？

jQuery関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。