https://woman-career-change.jp/js/section4-tab.js

1function initCourseTabs() {
2    const isSP = window.matchMedia('(max-width: 767px)').matches;
3    const tabArea = document.querySelector('.js-course-tab-area');
4
5    if (!tabArea) return;
6
7    const buttons = tabArea.querySelectorAll('.course_tab_button');
8    const contents = tabArea.querySelectorAll('.js-course-tab-content');
9
10    if (!buttons.length || !contents.length) return;
11
12    if (isSP) {
13      const currentActiveButton = tabArea.querySelector('.course_tab_button.is-active') || buttons[0];
14      const currentTarget = currentActiveButton.dataset.courseTab;
15
16      buttons.forEach((btn) => btn.classList.remove('is-active'));
17      contents.forEach((content) => content.classList.remove('is-active'));
18
19      currentActiveButton.classList.add('is-active');
20
21      const activeContent = tabArea.querySelector('[data-course-content="' + currentTarget + '"]');
22      if (activeContent) {
23        activeContent.classList.add('is-active');
24      }
25    } else {
26      buttons.forEach((btn) => btn.classList.remove('is-active'));
27      contents.forEach((content) => content.classList.add('is-active'));
28    }
29  }
30
31  document.addEventListener('click', function (e) {
32    const button = e.target.closest('.course_tab_button');
33    if (!button) return;
34
35    if (!window.matchMedia('(max-width: 767px)').matches) return;
36
37    const tabArea = button.closest('.js-course-tab-area');
38    if (!tabArea) return;
39
40    const buttons = tabArea.querySelectorAll('.course_tab_button');
41    const contents = tabArea.querySelectorAll('.js-course-tab-content');
42    const target = button.dataset.courseTab;
43
44    buttons.forEach((btn) => btn.classList.remove('is-active'));
45    contents.forEach((content) => content.classList.remove('is-active'));
46
47    button.classList.add('is-active');
48
49    const targetContent = tabArea.querySelector('[data-course-content="' + target + '"]');
50    if (targetContent) {
51      targetContent.classList.add('is-active');
52    }
53  });
54
55  window.addEventListener('load', initCourseTabs);
56  window.addEventListener('resize', initCourseTabs);