https://digital-career-fair.com/2026/09/js/tab.js

1// タブ
2const tabList = document.querySelectorAll('.tab-list-item');
3// タブコンテンツ
4const tabContent = document.querySelectorAll('.tab-contents-item');
5
6// DOMが読み込み終わったら
7document.addEventListener('DOMContentLoaded', function() {
8  // 各タブにクリックイベントを付与
9  for (let i = 0; i < tabList.length; i++) {
10    tabList[i].addEventListener('click', tabSwitch);
11  }
12
13  // タブをクリックしたときの処理
14  function tabSwitch() {
15    // すべてのタブからactiveクラスを削除
16    document.querySelectorAll('.tab-list-item.active').forEach(function(el) {
17      el.classList.remove('active');
18    });
19
20    // クリックされたタブにactiveクラスを追加
21    this.classList.add('active');
22
23    // すべてのタブコンテンツからshowクラスを削除
24    document.querySelectorAll('.tab-contents-item.show').forEach(function(el) {
25      el.classList.remove('show');
26    });
27
28    // タブのインデックスを取得
29    const aryTabs = Array.prototype.slice.call(tabList);
30    const index = aryTabs.indexOf(this);
31
32    // 対応するタブコンテンツにshowクラスを追加
33    tabContent[index].classList.add('show');
34  }
35});