【JavaScript】タブの切り替えをシンプル・簡単に実装する方法

今回は、ウェブサイトで、タブを切り替えコンテンツの内容を変更する機能を実装する例となります。例ではJavaScriptを利用しシンプルで簡単に実装します。

【JavaScript】タブの切り替えをシンプル・簡単に実装する例

以下、ソースコードの例となり、「Tab-A」「Tab-B」「Tab-C」をそれぞれクリックすると、その下のコンテンツの内容が変更します。

See the Pen QXjbmW by yic666kr (@yic666kr) on CodePen.

ソースコードの説明

以下、ソースコードのポイントとなる箇所の説明です。

HTMLのマークアップ

<div class="tab-panel">
	<!--タブ-->
	<ul class="tab-group">
		<li class="tab tab-A is-active">Tab-A</li>
		<li class="tab tab-B">Tab-B</li>
		<li class="tab tab-C">Tab-C</li>
	</ul>
	
	<!--タブを切り替えて表示するコンテンツ-->
    <div class="panel-group">
		<div class="panel tab-A is-show">Content-A</div>
		<div class="panel tab-B">Content-B</div>
		<div class="panel tab-C">Content-C</div>
	</div>
</div>

HTMLのソースコードでは、タブとタブを切り替えて表示するコンテンツの要素を、それぞれ3つ作成します。

デフォルトでは、現在のタブがclassにis-activeを指定してある「Tab-A」となり、コンテンツ内容は「Content-A」を表示しています。

「Content-A」の要素は、classをis-show(display:block;を指定)として表示させ、その他のコンテンツの要素は、display:none;を指定し非表示としています。

JavaScriptのソースコード

document.addEventListener('DOMContentLoaded', function(){
	// タブに対してクリックイベントを適用
	let tabs = document.getElementsByClassName('tab');
	for(let i = 0; i < tabs.length; i++) {
		tabs[i].addEventListener('click', tabSwitch, false);
	}

	function tabSwitch(){
		// タブのclassの値を変更
		document.getElementsByClassName('is-active')[0].classList.remove('is-active');
		this.classList.add('is-active');
        // コンテンツのclassの値を変更
		document.getElementsByClassName('is-show')[0].classList.remove('is-show');
		tabs = Array.prototype.slice.call(tabs);
		const index = tabs.indexOf(this);
		document.getElementsByClassName('panel')[index].classList.add('is-show');
	};
});

JavaScriptでは、タブをクリックすると、タブ・コンテンツのそれぞれのclassの値を変更します。そのことにより、タブをクリックして切り替えた際に、コンテンツの内容を変更します。

以下、JavaScriptの処理の流れの説明となります。

タブに対してクリックイベントを適用。

まず、ソースコード2行目からの箇所で、すべてのタブ(classにtabの値をもつ要素)に対して、addEventListenerメソッドでクリックイベントを適用します。

また、同じclassを持つすべての要素に対してクリックイベントを適用させる方法の詳細は、以下のリンク先を参考にしてみてください。

タブの切り替え

ソースコード9行目からの箇所では、タブがクリックされると、classの値is-activeをもつタブに対し、is-activeの値を削除します。そして、クリックしたタブに対してclassの値is-activeを追加します。

そのことにより、クリックしたタブにis-activeのCSSが適用されます。

また、classの値を扱う方法の詳細は、以下のリンク先を参考にしてみてください。

クリックしたタブと同じインデックス番号のコンテンツを表示

ソースコード12行目からの箇所では、コンテンツ(classにpanelの値をもつ要素)の中で、classの値is-show(display:block;を適用)をもつ要素に対し、is-showの値を削除し非表示とします。

そして、クリックしたタブからインデックス番号を取得し、その番号を利用することで、指定したコンテンツに対し、classの値のis-showを追加します。

そのことにより、クリックしたタブのインデックス番号と同じインデックス番号のコンテンツが表示されます。

また、HTMLの要素の集合からインデックス番号を取得する方法の詳細は、以下のリンク先を参考にしてみてください。

タブの切り替えを複数箇所に実装する場合

ページ内に、上記のタブを切り替え機能を複数箇所に設置する場合、JavaScriptを以下のソースコードに変更します。

document.addEventListener('DOMContentLoaded', function(){
	// タブに対してクリックイベントを適用
	const tabs = document.getElementsByClassName('tab');
	for(let i = 0; i < tabs.length; i++) {
		tabs[i].addEventListener('click', tabSwitch, false);
	}

	function tabSwitch(){
		// 引数で指定したセレクターに一致する直近の祖先要素を取得
		const ancestorEle = this.closest('.tab-panel');
        // タブのclassの値を変更
		ancestorEle.getElementsByClassName('is-active')[0].classList.remove('is-active');
		this.classList.add('is-active');
        // コンテンツのclassの値を変更
		ancestorEle.getElementsByClassName('is-show')[0].classList.remove('is-show');
		let currentTabs = ancestorEle.getElementsByClassName('tab');
		currentTabs = Array.prototype.slice.call(currentTabs);
		const index = currentTabs.indexOf(this);
		ancestorEle.getElementsByClassName('panel')[index].classList.add('is-show');
	};
});

上記ソースコードでは、タブ・コンテンツのclassの値を変更する際に、クリックしたタブに対する祖先要素のdiv(classの値がtab-panel)を利用することで、タブ・コンテンツのclassの値を変更する対象を制限しています。

そのことにより、複数のタブ切り替え機能がある場合でも正常に動作します。

jQueryでタブの切り替えを実装する場合

タブ切り替えをjQueryを利用し実装する方法については、以下のリンク先を参考にしてみてください。

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。