JavaScript로 탭 구현하기

지금부터 탭을 구현해 보겠습니다. 먼저 요구사항의 예시를 확인해 보세요:

문제를 해결할 마크업도 살펴보세요:

<div id="parent">
	<div class="menu">
		<a href="" class="active">탭 1</a>
		<a href="">탭 2</a>
		<a href="">탭 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			탭 1 내용
		</div>
		<div class="tab">
			탭 2 내용
		</div>
		<div class="tab">
			탭 3 내용
		</div>
	</div>
</div>

#parent {
	margin: 0 auto;
	width: 400px;
}

.menu a {
	margin-right: 5px;
	display: inline-block;
	padding: 10px;
	color: black;
	text-decoration: none;
	border: 1px solid gray;
}
.menu a:hover {
	background: #f8f8f8;
}
.menu a.active {
	border-color: transparent;
	background: #f2f2f2;
}

.tabs .tab:not(.active) {
	display: none;
}
.tabs .tab {
	padding: 10px;
	background: #f2f2f2;
	height: 300px;
}

활성화된 링크와 활성화된 탭이 active 클래스를 가지고 있다는 점에 주목하세요.

토론

이제 이 문제를 어떻게 해결할지 논의해 봅시다. 명백히 링크와 해당하는 탭을 어떤 방식으로든 연결해야 합니다. 이론 교재의 이 강의에서 우리는 가능한 옵션들을 이미 살펴보았습니다.

이 경우에는 단순히 위치로 링크와 탭을 연결하는 것을 제안합니다: 첫 번째 링크는 첫 번째 탭을, 두 번째 링크는 두 번째 탭을 열고, 이런 식으로 진행됩니다.

전체 알고리즘은 다음과 같을 것입니다: 버튼을 클릭하면 활성 클래스를 가진 링크를 찾아 그 클래스를 제거해야 합니다. 동일한 방식으로 해당 클래스를 가진 탭을 찾아 클래스를 제거해야 합니다.

그런 다음 클릭된 링크를 가져와 활성화해야 합니다. 그 후 우리 링크와 동일한 번호를 가진 탭을 가져와 활성화해야 합니다.

제공된 HTML 및 CSS 코드를 복사하세요. 설명된 알고리즘에 따라 탭을 구현하세요.