Written by Kasumi

JavaScriptでタブ切り替えを実装する方法【jQuery不要】

jQueryを使わず、JavaScriptだけでタブ切り替えを実装したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装例

See the Pen
JavaScriptでタブ切り替えを実装する方法
by Kohei (@kouk05)
on CodePen.0

タブ切り替えの実装例です。

タブをクリックすると、それに応じたコンテンツが表示・非表示で切り替わります。

実装手順は以下の通りです。

タブ切り替えのHTML

<!-- タブ -->
<ul class="tab-list">
  <li class="tab-list-item active">タブ01</li>
  <li class="tab-list-item">タブ02</li>
  <li class="tab-list-item">タブ03</li>
</ul>

<!-- タブコンテンツ  -->
<div class="tab-contents">
  <div class="tab-contents-item show">
    タブコンテンツ01
  </div>
    <div class="tab-contents-item">
    タブコンテンツ02
  </div>
    <div class="tab-contents-item">
    タブコンテンツ03
  </div>
</div>

まずはタブ切り替え用のHTMLを準備します。

最初に表示させたいタブにactiveクラスを付与。

最初に表示させたいタブコンテンツにshowクラスを付与します。

タブ切り替えのCSS

.tab-list {
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-btween;
}
.tab-list-item {
  text-align: center;
  flex: 0 0 33.33333%;
  background-color: #eee;
  padding: 10px 0;
}
.tab-list-item.active {
  background-color: #7FCCE3;
}

.tab-contents-item {
  display: none;
}
.tab-contents-item.show {
  display: block;
}

次にCSSを使ってタブ切り替えを装飾します。

タブを選択・非選択で明確にわかるようにbackgroundプロパティを使って色分けしてます。

タブコンテンツをdisplayプロパティでshowクラスが付与されてるものは表示。

付与されてないものは非表示にしときます。

タブ切り替えのJS

// タブ
const tabList = document.querySelectorAll('.tab-list-item');
// タブコンテンツ
const tabContent = document.querySelectorAll('.tab-contents-item');

//DOMが読み込み終わったら
document.addEventListener('DOMContentLoaded', function(){
  // タブに対してクリックイベントを適用
  for(let i = 0; i < tabList.length; i++) {
    tabList[i].addEventListener('click', tabSwitch);
  }
  // タブをクリックすると実行する関数
  function tabSwitch(){
    // activeクラスを削除
    document.querySelectorAll('.active')[0].classList.remove('active');
    // クリックしたタブにactiveクラスを付与    
    this.classList.add('active');
    // showクラスを削除
    document.querySelectorAll('.show')[0].classList.remove('show');
    // タブを配列風オブジェクトとして定義
    const aryTabs = Array.prototype.slice.call(tabList);
    // クリックしたタブの配列番号を取得     
    const index = aryTabs.indexOf(this);
    // クリックしたタブと同じ配列番号のタブコンテンツにshowクラスを付与    
    tabContent[index].classList.add('show');
  };
});

最後にJavaScriptでタブ切り替えを実装します。

タブとタブコンテンツ要素を変数に格納。

addEventListenerでタブのクリックイベントを定義。

タブをクリックしたら実行する関数を引数に定義します。

classList.removeを使って通常のタブはactiveクラスを削除。

クリックしたタブにはclassList.addを使ってactiveクラスを付与します。

indexOfでクリックしたタブの配列番号を取得。

クリックしたタブと同じ配列番号にあるタブコンテンツにshowクラスを付与。

それ以外のタブコンテンツはshowクラスを削除します。

以上でタブ切り替えの実装が完了です。

まとめ

jQueryを使わず、JavaScriptでタブ切り替えを実装する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【JavaScript】受け取ったデータが文字列 or 数値どちらなのか判定する方法【typeof演算子を使おう】

2022.11.29
331
JavaScript

【簡単】JavaScriptを使って任意の文字列を置換する方法

更新日:2022.09.09
184
JavaScript

【簡単】JavaScriptを使って任意の文字列が配列内にあるか検索する方法【indexOfメソッド】

更新日:2022.09.09
128
JavaScript

【JavaScript】配列から最大値・最小値を求める方法

2022.06.08
310