JavaScriptでつくるシンプルなタブメニューの実装

2023/07/30

JavaScriptでつくるシンプルなタブメニューを実装します。
同一ページにタブメニューを複数設置しても動作するように実装しております。
まずはサンプルをご覧ください。

サンプルをご覧ください

上記タブメニューを操作してみてください。
メニューボタンをクリックすると、該当するコンテンツが表示されると思います。
今回は、同一ページにタブメニューを複数設置しても不具合なく動作するようにしてます。

HTMLの記述

<div class="tab-menu">
  <!-- タブメニュー① -->
  <div class="tab-menu__container js-tab">
    <!-- メニュー -->
    <ul class="tab-menu__head">
      <!-- クラス付与 -->
      <li class="js-tab-button is-active">東京本社</li>
      <li class="js-tab-button">名古屋支店</li>
      <li class="js-tab-button">大阪支店</li>
    </ul>
    <!-- コンテンツ -->
    <ul class="tab-menu__main">
      <!-- クラス付与 -->
      <li class="js-tab-content is-active">
        東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。
      </li>
      <li class="js-tab-content">
        名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。</li>
      <li class="js-tab-content">
        大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。
      </li>
    </ul>
  </div>
  
  <!-- タブメニュー② -->
  <div class="tab-menu__container js-tab">
    <!-- メニュー -->
    <ul class="tab-menu__head">
      <!-- クラス付与 -->
      <li class="js-tab-button is-active">東京本社</li>
      <li class="js-tab-button">名古屋支店</li>
      <li class="js-tab-button">大阪支店</li>
    </ul>
    <!-- コンテンツ -->
    <ul class="tab-menu__main">
      <!-- クラス付与 -->
      <li class="js-tab-content is-active">
        東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。東京本社の情報が入ります。
      </li>
      <li class="js-tab-content">
        名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。名古屋支店の情報が入ります。</li>
      <li class="js-tab-content">
        大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。大阪支店の情報が入ります。
      </li>
    </ul>
  </div>
</div>

2つ分のタブメニューのコードを記述しております。
JavaScriptで操作する要素に「js-〇〇」というクラス名をつけてます。
タブメニュー本体に「js-tab」、クリックする要素に「js-tab-button」、コンテンツ部分に「js-tab-content」を記述してます。

SCSSの記述

.tab-menu {
  padding: 60px 20px;
  &__container {
    max-width: 1000px;
    margin: 0 auto 60px;
    border: 1px solid #000;
    &:last-child {
      margin: auto;
    }
  }
  &__head {
    display: flex;
    border-bottom: 1px solid #000;
    li {
      flex: 1;
      font-weight: bold;
      padding: 20px;
      border-right: 1px solid #000;
      cursor: pointer;
      &:last-child {
        border-right: none;
      }
      /* クラス付与時の指定 */
      &.is-active {
        color: #fff;
        background: #000;
      }
    }
  }
  &__main {
    padding: 20px;
    li {
      display: none;
      line-height: 1.6;
      /* クラス付与時の指定 */
      &.is-active {
        display: block;
      }
    }
  }
}

クラスの付与でメニューボタンの色を変更したり、コンテンツの表示・非表示を切り替えています。
「is-active」クラスに付与時のプロパティを指定しています。

JavaScriptの記述

//要素を取得
const tabs = document.querySelectorAll('.js-tab');

//繰り返し処理
tabs.forEach((tab) => {
  //要素を取得
  const buttons = tab.querySelectorAll('.js-tab-button'),
    contents = tab.querySelectorAll('.js-tab-content');

  function toggle() {
    //ボタンのクラス削除
    buttons.forEach((button) => {
      button.classList.remove('is-active');
    });

    //コンテンツのクラス削除
    contents.forEach((content) => {
      content.classList.remove('is-active');
    });

    //ボタンにクラス付与
    this.classList.add('is-active');

    //クリックした要素の順番を取得
    const arrayButton = Array.prototype.slice.call(buttons),
      index = arrayButton.indexOf(this);

    //該当するコンテンツを表示
    contents[index].classList.add("is-active");
  }

  //繰り返し処理
  buttons.forEach((button) => {
    //クリックイベント
    button.addEventListener('click', toggle);
  });
});

「document.querySelectorAll」でタブメニューの要素を変数に格納します。

タブが複数あってもいいように「tabs.forEach((tab) =>{}」で繰り返し処理をします。
繰り返し処理内で「js-tab-button」「js-tab-content」を変数に格納します。

「function toggle() {}」にメニューボタンをクリックした時の処理を記述します。
最初に「classList.remove」で「is-active」クラスを削除します。

「classList.add」でクリックしたボタンにクラスを付与します。
「Array.prototype.slice.call」と「indexOf(this)」で、クリックした要素の順番を取得します。
「contents[index].classList.add」で、クリック要素と同じ順番のコンテンツにクラスを付与します。

以上でタブメニューを実装することができました。