【javascript】タブでコンテンツの切り替えをする

2022年6月15日

この記事ではタブでコンテンツを切り替えるデモとソースコードを紹介します。

デモ

サンプルコード

<div class="js-tab-panel">

    <div class="flex justify-start">
        <div class="js-tab active_tab">
            タブ1
        </div>

        <div class="js-tab inactive_tab">
            タブ2
        </div>

        <div class="js-tab inactive_tab">
            タブ3
        </div>

        <div class="js-tab inactive_tab">
            タブ4
        </div>
    </div>

    <div class="js-panel active_content">
        コンテンツ1
    </div>

    <div class="js-panel inactive_content">
        コンテンツ2
    </div>

    <div class="js-panel inactive_content">
        コンテンツ3
    </div>

    <div class="js-panel inactive_content">
        コンテンツ4
    </div>

</div>

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.active_tab {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
  padding: 5px 10px;
}

.inactive_tab{
  padding: 5px 10px;
}

.active_content{
  display: inline;
  font-size:3rem;
}

.inactive_content{
  display: none;
}


document.addEventListener("DOMContentLoaded", function () {
  // タブに対してクリックイベントを適用
  const tabs = document.getElementsByClassName("js-tab");
  for (let i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener("click", tabSwitch);
  }

  // タブをクリックすると実行する関数
  function tabSwitch() {
    // 引数で指定したセレクターと一致する直近の祖先要素を取得
    const ancestorEle = this.closest(".js-tab-panel");

    const active_tab_classes = "active_tab";
    const inactive_tab_classes = "inactive_tab";
    // タブのclassの値を変更
    if (ancestorEle.getElementsByClassName(active_tab_classes)[0]) {
      ancestorEle
        .getElementsByClassName(active_tab_classes)[0]
        .classList.add(inactive_tab_classes);
      ancestorEle
        .getElementsByClassName(active_tab_classes)[0]
        .classList.remove(active_tab_classes);
      this.classList.add(active_tab_classes);
      this.classList.remove(inactive_tab_classes);
    }

    // コンテンツのclassの値を変更
    const active_content_classes = "active_content";
    const inactive_content_classes = "inactive_content";
    const targetEle = ancestorEle.getElementsByClassName(
      "js-panel " + active_content_classes
    )[0];
    targetEle.classList.remove(active_content_classes);
    targetEle.classList.add(inactive_content_classes);

    const groupTabs = ancestorEle.getElementsByClassName("js-tab");
    const arrayTabs = Array.prototype.slice.call(groupTabs);
    const index = arrayTabs.indexOf(this);
    const targetPanel = ancestorEle.getElementsByClassName("js-panel")[index];
    targetPanel.classList.add(active_content_classes);
    targetPanel.classList.remove(inactive_content_classes);
  }
});

よかったらシェアしてね！