JavaScriptで切り替えタブの作り方

プログラミング

<script>” title=”<script>

<script>

今回はJavaScriptのみで切り替えタブを実装していきます。

jQueryを使って実装したい方は下記を参考にしてください。

jQueryで切り替えタブの作り方

それでは早速デモページを確認し、切り替えタブを実装していきましょう！

See the Pen yLMZWJa by Makiko Yamada (@makiko-yamada) on CodePen.

JavaScriptで切り替えタブの作り方：HTML編

<ul class="tab">
  <li class="tab_menu active">洋画</li>
  <li class="tab_menu ">邦画</li>
  <li class="tab_menu ">海外ドラマ</li>
  <li class="tab_menu ">国内ドラマ</li>
</ul>
<ul class="tab_detail_wrap show">
  <li>ハリーポッター</li>
  <li>スパイダーマン</li>
  <li>マトリックス</li>
</ul>
<ul class="tab_detail_wrap">
  <li>ALWAYS 三丁目の夕日</li>
  <li>舟を編む</li>
  <li>永遠の0</li>
</ul>
<ul class="tab_detail_wrap">
  <li>ウォーキング・デッド</li>
  <li>ゴシップガール</li>
  <li>スーツ</li>
</ul>
<ul class="tab_detail_wrap">
  <li>タラレバ娘</li>
  <li>トリック</li>
  <li>花より男子</li>
</ul>

切り替えたぶ1つ1つにtab_menuというクラスをつけます。

クリックした時に開くコンテンツ部分にはtab_detail_wrapというクラスをつけます。

JavaScriptで切り替えタブの作り方：CSS編

.tab{
    border-bottom: 3px solid #d5c5a5;
    display: flex;
    justify-content: space-around;
    padding:0;
}
                    
.tab_menu{
    width:calc(100%/4);
    color: #333;
    list-style: none;
    text-align: center;
    padding:5px 0;
    border-right: 1px solid #eee;
    cursor: pointer;
    transition: .3s;
    font-size:14px;
}

.tab_detail_wrap{
    display: none;
}

.tab_menu.active{
    display: block;
    color: #fff;
    background-color: #d5c5a5;
    cursor: pointer;
}

.tab_detail_wrap.show{
    display: block;
}

JavaScriptで切り替えタブの作り方：JavaScript編

const tabs = document.getElementsByClassName('tab_menu');
  for(let i = 0; i < tabs.length; i++){
    tabs[i].addEventListener('click',tabSwitch);
  }
  function tabSwitch(){
    document.getElementsByClassName('active')[0].classList.remove('active');
    this.classList.add('active');
    document.getElementsByClassName('show')[0].classList.remove('show');
    const arrayTabs = Array.prototype.slice.call(tabs);
    const index = arrayTabs.indexOf(this);
    document.getElementsByClassName('tab_detail_wrap')[index].classList.add('show');
  };

最後にJavaScriptの作成です。

1つ1つ見ていきます。

const tabs = document.getElementsByClassName('tab_menu');

tabsという定数を定義し、tab_menuクラスが設定されているHTML要素をすべて取得します。

for(let i = 0; i < tabs.length; i++){
    tabs[i].addEventListener('click',tabSwitch);
  }

for文を使い、クラスにtab_menuを持つ要素全てに対して、addEventListenerメソッドでクリックイベントを追加します。

document.getElementsByClassName('active')[0].classList.remove('active');
this.classList.add('active');

activeを持っている要素に対して、activeを削除します。そしてクリックしたタブに対してactiveを追加します。

document.getElementsByClassName('show')[0].classList.remove('show');

showを持っている要素に対して、showを削除します。

const arrayTabs = Array.prototype.slice.call(tabs);
const index = arrayTabs.indexOf(this);
document.getElementsByClassName('tab_detail_wrap')[index].classList.add('show');
Array.prototype.slice.call(arguments);
argumentsを配列に変換する呪文
indexOf
配列の中に格納されている文字列と一致するものを抽出

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

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