【JavaScript・CSS】タブの切り替えメニューを実装する方法｜複数箇所の場合も
今回はJavaScript・CSSを利用し、タブメニューを切り替えてコンテンツの内容を変更する例となります。
【JavaScript・CSS】タブの切り替えメニューを実装する例
以下の例では、「Tab-A」「Tab-B」「Tab-C」のいずれかを選択して変更すると、その下のコンテンツの内容も変更します。
See the Pen JavaScript：Tab Switching by yic666kr (@yic666kr) on CodePen.
HTMLの簡単な説明
HTMLのマークアップの簡単な説明となります。
以下の箇所では、タブとタブを切り替えて表示するコンテンツの要素を、それぞれ3つ作成しています。
デフォルトでは、現在のタブがclassにis-activeをもつ「Tab-A」となり、コンテンツの要素は「Content-A」を表示しています。
「Content-A」の要素は、classをis-show（CSSでdisplay:block;を指定）にして表示させ、その他のコンテンツの要素は、display:none;を指定して非表示としています。
<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>
JavaScriptの簡単な説明
JavaScriptの簡単な説明となります。
タブに対してクリックイベントを適用
以下の箇所では、すべてのタブ（classにtabの値をもつ要素）に対して、addEventListenerメソッドでクリックイベントを適用しています。
// タブに対してクリックイベントを適用
const 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');
const arrayTabs = Array.prototype.slice.call(tabs);
const index = arrayTabs.indexOf(this);
document.getElementsByClassName('panel')[index].classList.add('is-show');
};タブの切り替え
上記の関数内では、まず、classの値is-activeをもつタブに対し、is-activeの値を削除します。そして、クリックしたタブに対してclassの値is-activeを追加することで、タブの色を変更しています。
また、要素のclassの値を扱う方法については、以下のリンク先を参考にしてみてください。
クリックしたタブと同じインデックス番号のコンテンツを表示
次に、コンテンツ（classにpanelの値をもつ要素）の中で、classの値is-show（display:block;を適用）をもつ要素に対し、is-showの値を削除し非表示にしています。
そして、クリックしたタブからインデックス番号を取得し、その番号を利用して指定したコンテンツに対し、classの値is-showを追加することで、クリックしたタブのインデックス番号と同じインデックス番号のコンテンツが表示しています。
また、要素の集合からインデックス番号を取得する方法については、以下のリンク先を参考にしてみてください。
タブの切り替えメニューを複数箇所に実装する場合
ページ内に、上記のタブを切り替え機能を複数箇所に設置する場合、JavaScriptを以下のソースコードに変更します。
document.addEventListener('DOMContentLoaded', function(){
// タブに対してクリックイベントを適用
const tabs = document.getElementsByClassName('tab');
for(let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', tabSwitch);
}
// タブをクリックすると実行する関数
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');
const groupTabs = ancestorEle.getElementsByClassName('tab');
const arrayTabs = Array.prototype.slice.call(groupTabs);
const index = arrayTabs.indexOf(this);
ancestorEle.getElementsByClassName('panel')[index].classList.add('is-show');
};
});
上記ソースコードでは、クリックしたタブに対する祖先要素のdiv（classの値がtab-panel）を利用することで、タブ・コンテンツのclassの値を変更する対象を制限しています。
そのことにより、複数のタブ切り替え機能がある場合でも正常に動作します。
jQueryでタブの切り替えを実装する場合
タブ切り替えをjQueryを利用し実装する方法については、以下のリンク先を参考にしてみてください。
