（参考URL） https://qiita.com/koki_73/items/33aa2456ecfcce61214a

common.js

$(function() {
  let tabs = $(".tab"); // tabのクラスを全て取得し、変数tabsに配列で定義
  $(".tab").on("click", function() { // tabをクリックしたらイベント発火
    $(".active").removeClass("active"); // activeクラスを消す
    $(this).addClass("active"); // クリックした箇所にactiveクラスを追加
    const index = tabs.index(this); // クリックした箇所がタブの何番目か判定し、定数indexとして定義
    $(".content").removeClass("show").eq(index).addClass("show"); // showクラスを消して、contentクラスのindex番目にshowクラスを追加
  })
})

index.html

<div class="tab-area">
  <div class="tab active">
    タブ１
  </div>
  <div class="tab">
    タブ２
  </div>
  <div class="tab">
    タブ３
  </div>
  <div class="tab">
    タブ４
  </div>
  <div class="tab">
    タブ５
  </div>
</div>
<div class="content-area">
  <div class="content show">
    タブ１の中身です
  </div>
  <div class="content">
    タブ２の中身です
  </div>
  <div class="content">
    タブ３の中身です
  </div>
  <div class="content">
    タブ４の中身です
  </div>
  <div class="content">
    タブ５の中身です
  </div>
</div>

style.css

.tab-area {
  display: flex;
  justify-content: space-around;
  background-color: #222e3e;
  cursor: pointer;
}
.tab-area .tab {
  width: 300px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: white;
  border-right: 1px solid #50637b;
  border-left: 1px solid #222e3e;
}
.tab-area .tab.active {
  background-color: #ccc;
  color: #222e3e;
  border: none;
}

.content-area {
  font-size: 30px;
  text-align: center;
}
.content-area .content {
  display: none;
}
.content-area .content.show {
  margin-top: 50px;
  display: block;
}