jQueryを使ってタブメニューを作る

はじめに

jQueyを使ってタブメニューを作る方法について

HTML

まずはhtmlを下記のように記述します。

<ul class="tab-title">
  <li class="tab tab-active">タブタイトル1</li>
  <li class="tab">タブタイトル2</li>
  <li class="tab">タブタイトル3</li>
</ul>
<div class="tab-contents">
  <div class="tab-body body-active">
     <p>コンテンツ1</p>
  </div>
  <div class="tab-body">
     <p>コンテンツ2</p>
  </div>
  <div class="tab-body">
    <p>コンテンツ3</p>
  </div>
</div>

タブのタイトルの部分は、クリックされると.tab-activeクラスが付与されるようにjQueryで実装します。

タブのコンテンツの部分も、クリックされると.body-activeクラスが付与されるようにjQueryで実装します。

続いて、下記のようにcssを書きます。

.tab-title {
  display: flex;
  justify-content: space-around;
  text-align: center;
  list-style: none;
}

.tab {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #CCC;
}

.tab-active {
  color: #FFF;
  background: #19b5d1;
}

.tab-body {
  display: none;
  padding: 15px;
}

.body-active {
  display: block;
}

タブタイトルをクリックすると付与される.tab-activeに対して、cssで背景色と文字の色を変更します。

コンテンツの部分は、デフォルトでは非表示にしておいて、.body-activeクラスが付与されているコンテンツだけを表示するようにします。

最後にjQueryの設定です。

document.addEventListener("turbolinks:load", function() {
  $(function() {
    $('.tab').click(function(){
        $('.tab-active').removeClass('tab-active');
        $(this).addClass('tab-active');
        $('.body-active').removeClass('body-active');
        const index = $(this).index();
        $('.tab-body').eq(index).addClass('body-active');
    });
  });
})