13 탭

1
// 모든 탭 래퍼에 탭 기능 적용
2
const tabWrappers = document.querySelectorAll('.tab-wrapper');
3

4
tabWrappers.forEach(wrapper => {
5
  const links = wrapper.querySelectorAll('.tab-menu a');
6
  const contents = wrapper.querySelectorAll('.tab-content > div');
7

8
  // 각 링크에 클릭 이벤트 추가
9
  links.forEach(link => {
10
    link.addEventListener('click', e => {
11
      e.preventDefault();
12

13
      // 모든 active 제거
14
      links.forEach(l => l.classList.remove('active'));
15
      contents.forEach(c => c.classList.remove('active'));
16

17
      // 클릭한 링크와 해당 콘텐츠에 active 추가
18
      link.classList.add('active');
19
      const target = document.querySelector(link.getAttribute('href'));
20
      target.classList.add('active');
21
    });
22
  });
23
});

1
// 이벤트 위임 방식
2
document.querySelectorAll('.tab-wrapper').forEach(wrapper => {
3
  wrapper.addEventListener('click', e => {
4
    const link = e.target.closest('.tab-menu a');
5
    if (!link) return;
6

7
    e.preventDefault();
8

9
    // active 토글
10
    wrapper.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
11
    link.classList.add('active');
12
    document.querySelector(link.getAttribute('href')).classList.add('active');
13
  });
14
});