【JavaScript】タブメニューの実装

はじめに

シンプルなタブの実装を速やかに終わらせるための備忘録。
CSSは最低限のデザインだけです。クラス名も好きに変えちゃってください。

ソースコード

index.html

    <!-- タブメニュー -->
    <ul>
      <li class="tab active">Portfolio</li>
      <li class="tab">Jobs</li>
      <li class="tab">Design</li>
      <li class="tab">Event</li>
    </ul>
    <!-- タブコンテンツ -->
    <div class="panel show">Portofolioです</div>
    <div class="panel">Jobsです</div>
    <div class="panel">Designです</div>
    <div class="panel">Eventです</div>

style.css

/* 子要素の.tabをfloatで左に浮かせたので親要素の高さを確保する */
ul:after{
  content: '';
  display: block;
  clear: both;
}
/* タブメニューのデザイン */
.tab{    
  padding: 5px 7px;
  text-align:center;
  display:block;
  float:left;
}
/*　選択中のタブの色を変える */
.tab.active{
  background: #000;
  border-radius: 3px;
  color:#FFF;
  transition: all 0.5s ease-out;
}
/* .showがついていない.panelは全て非表示 */
.panel {
  display: none;
}
/* .showがついた.panelを表示する */
.panel.show {
  display: block;
}

main.js

  // worksページタブ機能
  const tabs = document.getElementsByClassName('tab');

  for(let i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', tabSwitch);
  }
  // タブをクリックすると実行する関数
  function tabSwitch(){
    // .tabを名付けた要素のクラスを付け替える処理
    document.getElementsByClassName('active')[0].classList.remove('active');
    this.classList.add('active');

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

解説

getElementsByClassName('active')[0]

getElementsByClassName()
・対象となるクラス名が設定されているHTML要素をすべて取得できる

なぜ[0]をつけるのか？

与えられたクラス名で得られる子要素すべての配列ライクのオブジェクトを返します。documentオブジェクトで呼び出されたときは、ルートノードを含む、完全な文書が検索されます。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

よって配列を個別で取得する必要がある。この場合は、.activeがついている要素の1番目を取得している。（上のソースコードであれば、.activeは１つしかないので[0]となる）

console.log(getElementsByClassName('active'));
//HTMLCollection []
// length: 1
// 0: li.tab.active <= ここから.activeの要素を取得する
// __proto__: HTMLCollection

classList

・対象要素に設定しているクラスを配列のように扱えるオブジェクト
・読み取り専用のプロパティ
・Element.classList.メソッドでよく使われる。

メソッド名	機能
add()	クラスを追加
remove()	クラスを削除
toggle()	クラスがあれば削除・無ければ追加
contain()	クラス名の有無を true / false で返す
replace( oldClass, newClass )	oldClassをnewClassで置き換え

Array.prototype.slice.call(tabs)

・tabsはHMTLCollectionという配列風オブジェクトなので、配列に変換する。

arrayTabs.indexOf(this)

・String オブジェクトの中からfromIndexで１番最初に現れた値のインデックスを返す。
・値が見つからない場合は-1を返す。
・document.getElementsByClassName('tab')で取得したHTMLCollectionをArray.prototype.slice.call()で配列に変換したので、indexOf()でインデックスを取得し、.showをつける.panelを判別する。

おわりに

間違いありましたらご指摘お願いします！