웹 개발에서 자주 사용되는 기능 중 하나는 탭 구현입니다. 탭은 여러 개의 컨텐츠를 각각의 탭으로 나누어서 보여주는 UI 요소입니다. 이번에는 jQuery를 사용하여 간단하게 탭을 구현하는 방법에 대해 알아보겠습니다.

HTML 마크업

먼저, 탭을 구현하기 위해 필요한 HTML 마크업을 작성해야 합니다. 각 탭은 하나의 버튼과 해당 버튼에 대응하는 컨텐츠로 구성됩니다. 아래는 간단한 탭 구조의 예시입니다.

<div class="tabs">
  <button class="tab-button active" data-target="content-1">Tab 1</button>
  <button class="tab-button" data-target="content-2">Tab 2</button>
  <button class="tab-button" data-target="content-3">Tab 3</button>

  <div id="content-1" class="tab-content active">
    <!-- Tab 1의 내용 -->
  </div>
  <div id="content-2" class="tab-content">
    <!-- Tab 2의 내용 -->
  </div>
  <div id="content-3" class="tab-content">
    <!-- Tab 3의 내용 -->
  </div>
</div>

위의 예시에서는 tabs라는 클래스를 가진 최상위 태그를 사용하여 탭을 그룹화했습니다. 각 탭 버튼은 tab-button 클래스를 가지며, data-target 속성을 사용하여 해당 버튼이 클릭되었을 때 보여줄 컨텐츠의 ID를 지정합니다. 탭 컨텐츠는 tab-content 클래스를 가지며, 기본적으로 첫 번째 탭에는 active 클래스를 추가하여 초기에 보여지도록 설정합니다.

jQuery로 탭 구현하기

jQuery를 사용하여 탭을 구현하기 위해서는 다음과 같은 스크립트를 작성해야 합니다.

$(document).ready(function() {
  // 탭 버튼 클릭 이벤트 처리
  $('.tab-button').click(function() {
    // 모든 탭 버튼과 탭 컨텐츠에서 active 클래스 제거
    $('.tab-button, .tab-content').removeClass('active');

    // 클릭한 탭 버튼과 대응하는 탭 컨텐츠에 active 클래스 추가
    var target = $(this).data('target');
    $('#' + target).addClass('active');
    $(this).addClass('active');
  });
});

위의 스크립트는 문서가 준비되면 실행될 $(document).ready() 함수를 사용하여 탭을 초기화합니다. 탭 버튼이 클릭되었을 때는 클릭 이벤트에 대한 핸들러 함수를 등록합니다. 핸들러 함수 내에서는 현재 활성화된 탭 버튼과 컨텐츠의 active 클래스를 모두 제거한 후, 클릭한 탭 버튼과 대응하는 탭 컨텐츠에 active 클래스를 추가합니다.

실행 결과

위의 HTML과 JavaScript 코드를 함께 작성하고, 웹 페이지에서 실행하면 각 탭 버튼을 클릭할 때 해당 컨텐츠가 보여지는 탭 UI를 확인할 수 있습니다.

결론

이번 글에서는 jQuery를 사용하여 간단한 탭 구현 방법에 대해 알아보았습니다. jQuery를 사용하면 조금 더 쉽게 탭을 구현할 수 있으며, 다양한 기능들을 추가할 수도 있습니다. jQuery를 활용하여 웹 개발을 할 때는 문서를 참고하여 다양한 기능들을 활용해보세요.

참고 문서:
jQuery Documentation