【サンプルあり】JavaScriptでタブ切り替えを作る

今回はJavaScript（Vanilla JS）でタブ切り替えを作る方法を解説します。

Contents

サンプル
仕様
コード解説
参考サイト

サンプル

See the Pen Tab by POSIPAN (@posipan) on CodePen.

仕様

上部にあるタブをクリックすると、コンテンツがタブと対応するものに切り替わる

コード解説

HTML

初期表示は最初のタブとそれに対応するコンテンツに対して、
.activeを追加しています。

<div class="container">
  <ul class="tab-list">
    <li class="tab-item active">About</li>
    <li class="tab-item">Works</li>
    <li class="tab-item">Contact</li>
  </ul>
  <div class="tab-container">
    <div class="tab-content active">Aboutの内容</div>
    <div class="tab-content">Worksの内容</div>
    <div class="tab-content">Contactの内容</div>
  </div>
</div>

CSS

今回の実装のポイントであるCSSの抜粋です。

タブとそれに対応するコンテンツに対して、.activeを追加した時の見た目を整えています。

.tab-list {
  display: flex;
  li {
    略
    &.active {
      background: #333;
      color: #fff;
    }
  }
}
.tab-container {
　　略
  .tab-content {
    display: none;
    &.active {
      display: block;
    }
  }
}

JavaScript

tabItemはタブ要素を格納している変数です。

forループの中でtabItemにクリックイベントを追加し、tabToggle関数を発火するようにします。

各記述の詳細はコメントをご参照ください。

// 要素の取得
const tabItem = document.querySelectorAll('.tab-item');
const tabContent = document.querySelectorAll('.tab-content');

// tabItemに対してクリックイベントを追加
// クリックした時にtabToggle関数を発火
for (let i = 0; i < tabItem.length; i++) {
  tabItem[i].addEventListener('click', tabToggle);
}

function tabToggle() {
  // tabItemとtabContentの.activeを削除する
  for (let i = 0; i < tabItem.length; i++) {
    tabItem[i].classList.remove('active');
  }
  for (let i = 0; i < tabContent.length; i++) {
    tabContent[i].classList.remove('active');
  }
  
  // クリックしたtabItemに.activeを追加
  this.classList.add('active');
  
  // tabItemを配列にする、下記のようになる
  // [<li class="tab-item active">About</li>, <li class="tab-item">Works</li>, <li class="tab-item">Contact</li>]
  const aryTabs = Array.prototype.slice.call(tabItem);
  
  // 配列に格納したキーワードと最初一致したインデックスを格納
  // <li class="tab-item active">About</li>の場合は「0」が返ってくる
  const index = aryTabs.indexOf(this);
  
  // インデックスに対応したtabContentに.activeを追加
  tabContent[index].classList.add('active');
}

完成です！