javascript 基本その3-2 タブの切替

前回の内容から続いて
書き切れなかった内容をかきます。

タブの切り替え

結構重要な機能である
タブの切替機能について書きます。

まず例として下記の様なコードを書きます。
次にjsの詳細なコード内容についても書いて行きます。

html

 <!--イベントを発火させたいクラスをまずそれぞれ定義します。-->
<div class="panel">
    <!--タブ-->
    <ul class="tab-group">
        <li class="tab tab-A is-active">タブ-1</li>　<!-- is-activeがポイント -->
        <li class="tab tab-B">タブ-2</li>
        <li class="tab tab-C">タブ-3</li>
    </ul>
　　<!--基本is-activeの時だけcssを当てる様にするのが目的です。-->
    
    <!--タブを切り替えて表示するコンテンツ-->
  <div class="panel-group">
        <div class="panel tab-A is-show">コンテンツ-1</div> <!-- is-showがポイント -->
        <div class="panel tab-B">コンテンツ-2</div>
        <div class="panel tab-C">コンテンツ-3</div>
　　　　　<!--is-showだけ表示、他は非表示という形にします。-->
    </div>
</div>

css

.tab-group{
    display: flex;
    justify-content: center;
}
.tab{
    flex-grow: 1;
    padding:5px;
    list-style:none;
    border:solid 1px #CCC;
    text-align:center;
    cursor:pointer;
}
.panel-group{
    height:100px;
    border:solid 1px #CCC;
    border-top:none;
    background:#eee;
}
.panel{ /*非表示にさせます*/
    display:none;
}
.tab.is-active{  /*tabを上書きして発火させます*/
    background:#F00;
    color:#FFF;
    transition: all 0.2s ease-out;
}
.panel.is-show{ /*panelを上書きしてこれだけ表示させます*/
    display:block;
}

js

document.addEventListener('DOMContentLoaded', function(){
    // タブに対してクリックイベントを適用
    const tabs = document.getElementsByClassName('tab'); //ノードを取得
    for(let i = 0; i < tabs.length; i++) { //繰返し構文で全てに適用
        tabs[i].addEventListener('click', tabSwitch);
    }

    // タブをクリックすると実行する関数
    function tabSwitch(){
        // タブのclassの値を変更
        document.getElementsByClassName('is-active')[0].classList.remove('is-active'); //is-activeの追加
        this.classList.add('is-active'); //is-activeの削除
        // コンテンツのclassの値を変更
        document.getElementsByClassName('is-show')[0].classList.remove('is-show');
        const arrayTabs = Array.prototype.slice.call(tabs); //引数にとったオブジェクトを配列に変換してくれます。
        const index = arrayTabs.indexOf(this); //配列に対してだけ使い、DOMを引数にとって一致した要素番号を戻します。
        document.getElementsByClassName('panel')[index].classList.add('is-show');
    };
});

DOMContentLoadedイベント

最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。

this

関数（tabSwitch）の中でthisを使うと、イベントの発生元となった要素を取得することができます。

Array.prototype.slice.call()

引数にとったオブジェクトを配列に変換してくれます。

indexOf()

inexOf()は配列に対してだけ使い、DOMを引数にとって一致した要素番号を戻します。

forEach()

配列に対してよく使われる繰り返し処理です。

foreach1

配列.forEach( コールバック関数 )

foreach2

配列.forEach( function(value, index) {
  // 配列のデータに対しての処理、valueは値、indexは要素番号
} )