おはようございます、hamatakBlogです！
今回は、タブ表示切替についてご紹介します。
タブとは、下記の画像のようなものです！
本ブログでも、ヘッダー部分にタブを作ることで、ジャンル分けをしています！
タブがなくても、Webページは作れますが、組み込むことでページの可読性を高めることができるんです！！
タブの切り替え処理は、JavaScriptを組み込んでタブ選択時のイベントを拾って切り替えを行うパターンや、HTMLとCSSのみで実装するパターンがあります。
今回の記事では、どちらのパターンも解説するので、状況によって使い分けてみましょう！
それでは、学習スタート！！
それでは、JavaScriptを用いてタブの切替をやってみましょう！
HTML
<div>
<!--タブを表示-->
<ul class="tab-group">
<li class="tab japanese active-tab">国語</li>
<li class="tab mathematics">数学</li>
</ul>
<!--タブ切替表示内容-->
<div class="content-group">
<div class="content japanese show">国語の授業内容</div>
<div class="content mathematics">数学の授業内容</div>
<div class="content history">日本史の授業内容</div>
</div>
</div>
CSS
.tab-group{
/* display: flexでタブを横並びにする */
justify-content: center;
}
.tab{
padding:1vh;
list-style:none;
border:double 4px rgb(58, 57, 57);
text-align:center;
cursor:pointer;
}
.content-group{
height:100px;
border:solid 1px #CCC;
background:rgb(180, 180, 180);
}
/* 授業内容は、デフォルト非表示 */
.content{
display:none;
}
.tab.active-tab{
background:#0017FF;
color:#FFF;
}
/* is-showクラスが追加された場合表示 */
.content.show{
display:block;
}
Javascript
// class=tabの要素を取得
const tabs = document.getElementsByClassName('tab');
// tabsはタブの個数分存在するので、ループ処理を用いてそれぞれにクリックイベントを付与
for(let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', changeTab, false);
}
// addEventListenerで付与されたクリックしたときに呼び出される関数
function changeTab(){
// タブのclassを変更
// active-tabクラスによって選択されているかを判別しているため、
// タブクリック時に一度すべての選択を解除するためクラス削除
document.getElementsByClassName('active-tab')[0].classList.remove('active-tab');
// thisでクリックされた要素のみを指定することができる
// addでクリックされたタブにactive-tabを追加
this.classList.add('active-tab');
// コンテンツのclassを変更
document.getElementsByClassName('show')[0].classList.remove('show');
// クリックされたタブのクラスを取得
const tabClasses = Array.prototype.slice.call(this.classList);
// filter関数でクラス配列から、
// tab,active-tab以外のクラスを取得（japanese,mathematics,historyを取得）
var result = tabClasses.filter(function( item ) {
return item !== 'tab' && item !== 'active-tab';
});
// タブに応じた授業内容を表示
document.getElementsByClassName('content' + ' ' + result)[0].classList.add('show');
};
イメージはこちら⇓
タブ切替
まずは、HTML、CSSについて解説します。
HTMLに「ulタグ、liタグ」を用いてタブになる部分を表示します。その下に、タブごとで表示した内容（divタグ内）を表示します。
また、初期表示として表示したいタブと、タブに関連したdivタグにクラスを付与します。(それぞれactive-tab、show)
このクラスをJavaScripで付け替えることによって画面のタブ表示を変更していきます。
<li class="tab japanese active-tab">国語</li>
<div class="content japanese show">国語の授業内容</div>
CSSでは、上記で説明したクラス（active-tab、show）によって表示非表示を設定します。
/* 授業内容は、デフォルト非表示 */
.content{
display:none;
}
/* is-showクラスが追加された場合表示 */
.content.show{
display:block;
}
またタブを横に並べるほうがそれっぽいので、CSSでdisplay=flexを記載して、タブを横に並べます。
そのほか細かいデザイン設定は行っていますが、今回は説明を割愛します。
続いて、JavaScript
全部のタブ（class=tabを持つ）に、addEventListenerメソッドでClickイベントを付与します。
またgetElementsByClassNameで引数("tab")を持つ要素群が複数取得することができるので、この要素群をfor文を用いて要素の数だけループ処理を行います。
// class=tabの要素を取得
const tabs = document.getElementsByClassName('tab');
// tabsはタブの個数分存在するので、ループ処理を用いてそれぞれにクリックイベントを付与
for(let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', changeTab, false);
}
forで取り出した要素に対して、addEventListenerでClickイベントを付与し、第二引数にタブがクリックされた時に呼び出されるchangeTab関数を入れます。
addEventListenerについてより深く知りたい方は、
こちらのサイトをご覧ください。⇓
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
続いて、addEventListenerの第二引数に入れたchangeTab関数について、このchangeTab関数はタブのクリックイベント発火時に呼び出される関数として作成していきます。
// addEventListenerで付与されたクリックしたときに呼び出される関数
function changeTab(){
この関数で、行いたいことはクラスの追加と削除です。
classListに対してadd()、remove()関数を呼び出すことでクラスの追加、削除を行うことができます。
thisは、クリックされた要素（タブ）のみを指してます。
// タブのclassを変更
// active-tabクラスによって選択されているかを判別しているため、
// タブクリック時に一度すべての選択を解除するためクラス削除
document.getElementsByClassName('active-tab')[0].classList.remove('active-tab');
// thisでクリックされた要素のみを指定することができる
// addでクリックされたタブにactive-tabを追加
this.classList.add('active-tab');
CSSのみでタブ切替をしてみる
続いて、CSSのみでタブ切替を行いますが、少し記事が長くなってきたため、次回の記事にCSSのみでの切替を紹介したいと思います。
後程リンクも記載しますので、ぜひご覧ください！
以上ご視聴ありがとうございました！
