【JavaScript】タブを切り替えるイベントの作り方を解説

<ul class="tab__btn">
  <!-- タグボタン1 初期選択-->
  <li class="tab__name tab__name--one is-active">タブ1</li>
  <!-- タグボタン2 -->
　<li class="tab__name tab__name--two">タブ2</li>
　<!-- タグボタン3 -->
　<li class="tab__name tab__name--three">タブ3</li>
</ul>

/* ////////////////////////// */
/* タグボタン表示切り替え */
/* ////////////////////////// */
.tab__name.is-active {
  color: #FFF;
  opacity: 1;
  transition: 0.3s ease;
}

/* タグボタン1 */
.tab__name--one.is-active {
  background-color: red;
}

/* タグボタン2 */
.tab__name--two.is-active {
  background-color: blue;
}

/* タグボタン3 */
.tab__name--three.is-active {
  background-color: green;
}

<!-- タグ内容1 初期表示 -->
<div class="tab__content tab__content--one is-show">
  <div class="tab__content-inner">
    <p class="tab__description">タブ1のテキスト</p>
  </div></div>
<!-- タグ内容2 -->
<div class="tab__content tab__content--two">
  <div class="tab__content-inner">
    <p class="tab__description">タブ2のテキスト</p>
  </div>
</div>
<!-- タグ内容3-->
<div class="tab__content tab__content--three">
  <div class="tab__content-inner">
    <p class="tab__description">タブ3のテキスト</p>
  </div>
</div>

.tab__content {
  display: none;
}

/* ////////////////////////// */
/* タグ内容表示切り替え */
/* ////////////////////////// */

.tab__content.is-show {
  display: block;
}

// HTMLが読み込まれたら発動する
document.addEventListener('DOMContentLoaded', function () {

  // tab__nameをすべて取得しtagsに格納する
  const tabs = document.getElementsByClassName('tab__name');
  // 繰り返し構文、tags（配列を取得）が0以上の時1足す
  for (let i = 0; i < tabs.length; i++) {
    // クリックするたびに発動する
    tabs[i].addEventListener('click', tabSwitch, false);
  }

  // getElementsByClassName→指定したクラスを取得
  // for→繰り返し処理
  // length→配列を取得
  // addEventListener→イベント処理するメソッド（今回はクリック）

  // タブをクリックすると実行する関数
  function tabSwitch() {
    // 現在is-activeをもっているものから外す
    document.getElementsByClassName('is-active')[0].classList.remove('is-active');
    // クリックしところにis-activeをつける
    this.classList.add('is-active');
    //  現在is-showをもっているものから外す
    document.getElementsByClassName('is-show')[0].classList.remove('is-show');
    // tabsを配列としてarrayTabsに格納する
    const arrayTabs = Array.prototype.slice.call(tabs);
    // 配列からクリックした要素の順番を取得
    const index = arrayTabs.indexOf(this);
    // 取得した配列番号のものにis-showをつける
    document.getElementsByClassName('tab__content')[index].classList.add('is-show');

    // Array.prototype.slice.call→配列に変換する
    // indexOf→指定された要素の配列順番を取得

  };
}, false);