Javascriptでタブ機能

コード

var tabBtns = document.getElementsByClassName('tab');
var tabStages = document.getElementsByClassName('stage');
var activeIndex = 0;

Array.prototype.forEach.call(tabBtns, function (element, index) {
  element.addEventListener('click', function (e) {
    if (activeIndex === index) return;

    // 前回のアクティブクラスを削除
    tabBtns.item(activeIndex).classList.remove('is-active');
    tabStages.item(activeIndex).classList.remove('is-active');

    // クリックした要素にアクティブクラスを追加
    e.target.classList.add('is-active');
    tabStages.item(index).classList.add('is-active');

    // 現在アクティブの要素のインデックスを更新
    activeIndex = index;
  })
})

ul li {
  list-style: none;
}

.tabs {
  display: flex;
  flex-direction: row;
  color: #fff;
}
.tab:first-of-type {
  background-color: #f00;
}
.tab:nth-of-type(2) {
  background-color: #0f0;
}
.tab:last-of-type {
  background-color: #00f;
}
.tab.is-active {
  background-color: #333;
}
.stage {
  display: none;
  width: 600px;
  height: 300px;
}
.stage.is-active {
  display: block;
}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <ul class="tabs">
    <li class="tab is-active">タブ１</li>
    <li class="tab">タブ２</li>
    <li class="tab">タブ３</li>
  </ul>
  <div class="stage is-active">
    <h2>Stage1</h2>
    <p>Stage1</p>
  </div>
  <div class="stage">
    <h2>Stage2</h2>
    <p>Stage2</p>
  </div>
  <div class="stage">
    <h2>Stage3</h2>
    <p>Stage3</p>
  </div>
  <script src="./script.js"></script>
</body>
</html>