【JavaScript】タブ切り替えの仕組みを理解して実装する方法

<!-- タブボタン -->
<div class="tab-buttons">
  <button class="tab-btn active" data-tab="jujutsu">呪術廻戦</button>
  <button class="tab-btn" data-tab="oshinoko">推しの子</button>
  <button class="tab-btn" data-tab="frieren">葬送のフリーレン</button>
</div>

.tab-buttons {
  display: flex;
}

.tab-btn {
  padding: 10px 16px;
  border: none;
  background: #eee;
  cursor: pointer;
}

.tab-btn.active {
  background: #333;
  color: #fff;
}

<!-- コンテンツ -->
<div class="tab-contents">

  <div class="tab-content active" id="jujutsu">
    <h2>呪術廻戦</h2>
    <p>
      呪いと戦う呪術師たちのバトルアクション作品。<br>
      主人公・虎杖悠仁が「呪いの王」宿儺の力を宿しながら戦うストーリー。
    </p>
    <p>▶ 見どころ：迫力の戦闘シーンと個性豊かなキャラクター</p>
  </div>

  <div class="tab-content" id="oshinoko">
    <h2>推しの子</h2>
    <p>
      芸能界の裏側を描く衝撃作。<br>
      転生×サスペンス×アイドルという異色の組み合わせが魅力。
    </p>
    <p>▶ 見どころ：予想を裏切るストーリー展開</p>
  </div>

  <div class="tab-content" id="frieren">
    <h2>葬送のフリーレン</h2>
    <p>
      魔王討伐後の世界を描くファンタジー。<br>
      長寿のエルフ・フリーレンが人間との時間を振り返る物語。
    </p>
    <p>▶ 見どころ：静かで深い感情描写</p>
  </div>
  
</div>

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}

.tab-content.active {
  display: block;
}

// ① タブボタンとコンテンツを取得
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');

// ② クリックイベントを設定
tabButtons.forEach(button => {
  button.addEventListener('click', () => {

    // ③ すべてのactiveを削除
    tabButtons.forEach(btn => btn.classList.remove('active'));
    tabContents.forEach(content => content.classList.remove('active'));

    // ④ クリックされたタブにactive追加
    button.classList.add('active');

    // ⑤ 対応するコンテンツを表示
    const target = button.dataset.tab;
    document.getElementById(target).classList.add('active');

  });
});

// ① タブボタンとコンテンツを取得
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');

tabButtons.forEach(button => {
  button.addEventListener('click', () => {

  });
});

tabButtons.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));

button.classList.add('active');

const target = button.dataset.tab;
document.getElementById(target).classList.add('active');

button.dataset.tab

<button data-tab="jujutsu">

document.getElementById(target)

.classList.add('active')