10_tab
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
1. 탭
탭메뉴만들기 완성화면
<div class="tab-wrapper">
<ul class="tab-menu">
<li><a href="#tabs-1" class="active">리미</a></li>
<li><a href="#tabs-2">감자</a></li>
<li><a href="#tabs-3">치킨</a></li>
</ul>
<div class="tab-content">
<div id="tabs-1" class="active">
<h2>리미</h2>
<p>I like 치킨 (치킨시켜) Everybody likes 치킨 (치킨시켜) Let`s eat 치킨 (치킨시켜) 양념 치킨 후라이드 치킨 치킨 치킨 (치킨시켜) (치킨시켜) x2 반은 양념 치킨 반은 후라이드 치킨 무는 많이 줘요 아줌마 부위는 날개는 세게 다리는 네게 목은 빼주세요 아줌마 고도비만 치킨 알이 꽉 찬 치킨 두 마리 같은 걸로 아줌마 구이는 날개는 미듐 가슴도 미듐 다린 웰던으로 아줌마</p>
</div>
<div id="tabs-2">
<h2>감자</h2>
<p>Edge 있게 물티슈, (아줌마) 콜란 서비스 (아줌마) 할인카드... 되죠? (아줌마) 어저께도 거기 (아줌마) 시켰는데 쿠폰 두개 (아줌마) 감사하죠 콜라는 다이어트 중이니까 다이어트 콜라 염통튀김도 몇 개 되요? 원 플러스 원 곱빼기도 되요? 옆 테이블 남는 거 싸가도 되요? 이거 다 타 매장쿠폰 계산 되죠? I like 치킨 (치킨시켜) Everybody likes 치킨 (치킨시켜) Let`s eat 치킨 (치킨시켜) 양념 치킨 후라이드 치킨 치킨 치킨 (치킨시켜) (치킨시켜) x2</p>
</div>
<div id="tabs-3">
<h2>I like 치킨 (나는 반반)</h2>
<p>후라이드 좋다던 첫사랑 그녀 근데 네 옷에 묻어있던 양념 1000원 더 비싸서 양념을 못 사준 내 탓 이 악물고서 나도 성공을 했다 붉은 빛깔 그녀의 입술 같아서 쿠킹호일도 다 핥아먹어 날 떠난 이윤 지독한 가난이라서 양념 밖에는 난 안 먹어 후라이드 좋아한다고 말해야 했지 어떤 날엔 화내야 했지 (오빠가 돈이 어디 있다고 양념을 사줘) 우린 데이트하면 후라이드 우리가 매일 먹고 또 먹던 후라이드 근데 오빠 나도 속물 인가봐 양념이라면 눈이 돌아갔지 양념이 오빠의 피 같아 지금은 후라이드 밖에 못 삼켜 난 양념치킨이 더 좋아 양념을 먹어봐 넌 건강해지고 양념을 먹어봐 넌 머리 좋아져 양념을 먹어봐 넌 웃을 수 있고 양념을 먹어봐 넌 시험 합격해</p>
</div>
</div>
</div>
<div class="tab-wrapper">
<ul class="tab-menu">
<li><a href="#tabs-21" class="active">리미</a></li>
<li><a href="#tabs-22">감자</a></li>
<li><a href="#tabs-23">치킨</a></li>
</ul>
<div class="tab-content">
<div id="tabs-21" class="active">
<h2>리미</h2>
<p>I like 치킨 (치킨시켜) Everybody likes 치킨 (치킨시켜) Let`s eat 치킨 (치킨시켜) 양념 치킨 후라이드 치킨 치킨 치킨 (치킨시켜) (치킨시켜) x2 반은 양념 치킨 반은 후라이드 치킨 무는 많이 줘요 아줌마 부위는 날개는 세게 다리는 네게 목은 빼주세요 아줌마 고도비만 치킨 알이 꽉 찬 치킨 두 마리 같은 걸로 아줌마 구이는 날개는 미듐 가슴도 미듐 다린 웰던으로 아줌마</p>
</div>
<div id="tabs-22">
<h2>감자</h2>
<p>Edge 있게 물티슈, (아줌마) 콜란 서비스 (아줌마) 할인카드... 되죠? (아줌마) 어저께도 거기 (아줌마) 시켰는데 쿠폰 두개 (아줌마) 감사하죠 콜라는 다이어트 중이니까 다이어트 콜라 염통튀김도 몇 개 되요? 원 플러스 원 곱빼기도 되요? 옆 테이블 남는 거 싸가도 되요? 이거 다 타 매장쿠폰 계산 되죠? I like 치킨 (치킨시켜) Everybody likes 치킨 (치킨시켜) Let`s eat 치킨 (치킨시켜) 양념 치킨 후라이드 치킨 치킨 치킨 (치킨시켜) (치킨시켜) x2</p>
</div>
<div id="tabs-23">
<h2>I like 치킨 (나는 반반)</h2>
<p>후라이드 좋다던 첫사랑 그녀 근데 네 옷에 묻어있던 양념 1000원 더 비싸서 양념을 못 사준 내 탓 이 악물고서 나도 성공을 했다 붉은 빛깔 그녀의 입술 같아서 쿠킹호일도 다 핥아먹어 날 떠난 이윤 지독한 가난이라서 양념 밖에는 난 안 먹어 후라이드 좋아한다고 말해야 했지 어떤 날엔 화내야 했지 (오빠가 돈이 어디 있다고 양념을 사줘) 우린 데이트하면 후라이드 우리가 매일 먹고 또 먹던 후라이드 근데 오빠 나도 속물 인가봐 양념이라면 눈이 돌아갔지 양념이 오빠의 피 같아 지금은 후라이드 밖에 못 삼켜 난 양념치킨이 더 좋아 양념을 먹어봐 넌 건강해지고 양념을 먹어봐 넌 머리 좋아져 양념을 먹어봐 넌 웃을 수 있고 양념을 먹어봐 넌 시험 합격해</p>
</div>
</div>
</div>
탭 기능 리팩토링
// 모든 탭 래퍼에 탭 기능 적용
const tabWrappers = document.querySelectorAll('.tab-wrapper');
tabWrappers.forEach(wrapper => {
const links = wrapper.querySelectorAll('.tab-menu a');
const contents = wrapper.querySelectorAll('.tab-content > div');
// 각 링크에 클릭 이벤트 추가
links.forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
// 모든 active 제거
links.forEach(l => l.classList.remove('active'));
contents.forEach(c => c.classList.remove('active'));
// 클릭한 링크와 해당 콘텐츠에 active 추가
link.classList.add('active');
const target = document.querySelector(link.getAttribute('href'));
target.classList.add('active');
});
});
});
이벤트 위임으로 더 간단하게
// 이벤트 위임 방식
document.querySelectorAll('.tab-wrapper').forEach(wrapper => {
wrapper.addEventListener('click', e => {
const link = e.target.closest('.tab-menu a');
if (!link) return;
e.preventDefault();
// active 토글
wrapper.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
link.classList.add('active');
document.querySelector(link.getAttribute('href')).classList.add('active');
});
});
이벤트 위임의 장점
- 성능: 이벤트 리스너 수 감소
- 동적 요소: 나중에 추가된 요소도 작동
- 메모리: 메모리 사용량 감소