JavaScript로 탭 구현하기

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

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

html<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>

css#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 클래스를 가지고 있다는 점에 주목하세요.

토론

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

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

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

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