<!-- タブ　-->
<ul class="tab-list">
  <li class="tab-list__item active">タブA</li>
  <li class="tab-list__item">タブB</li>
  <li class="tab-list__item">タブC</li>
</ul>

<!-- タブコンテンツ 　-->
<div class="tab-contents">
  <div class="tab-contents__item show">
    タブコンテンツA
  </div>
  <div class="tab-contents__item">
    タブコンテンツB
  </div>
  <div class="tab-contents__item">
    タブコンテンツC
  </div>
</div>

.tab-list {
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-btween;
}

.tab-list__item {
  text-align: center;
  flex: 0 0 33.33333%;
  background-color: #eee;
  padding: 10px 0;
  cursor: pointer;
}
.tab-list__item.active {
  background-color: #7fcce3;
}

.tab-contents__item {
  display: none;
}
.tab-contents__item.show {
  display: block;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// タブ
const tabList = document.querySelectorAll(".tab-list__item");
// タブコンテンツ
const tabContent = document.querySelectorAll(".tab-contents__item");

//DOMが読み込み終わったら
document.addEventListener("DOMContentLoaded", function () {
  for (let i = 0; i < tabList.length; i++) {
    tabList[i].addEventListener("click", tabSwitch);
  }

  function tabSwitch() {
    // activeクラスを削除
    document.querySelectorAll(".active")[0].classList.remove("active");
    this.classList.add("active");

    //タブを配列にする
    let tabArr = Array.from(tabList);

    //クリックしたタブのインデックス番号を取得
    let index = tabArr.indexOf(this);
    
    // show クラスを削除
    document.querySelectorAll(".show")[0].classList.remove("show");

    //タブのインデックスから同じインデックスのコンテンツにshowクラスを付与する
    tabContent[index].classList.add("show");
  }
});