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でタブ切り替えを実装する方法について紹介しました。
以上で解説を終わります。