사실 탭메뉴는 사실 내가 가장 어려워하고 귀찮아하는 UI이다.
그래서 이번 참에 정리를 해서 두고두고 사용하고자 한다.
우선 결과물이다.
아래는 html 코드이다.
아래는 CSS코드이다.
.tab-container {
CSS가 별로 안이쁘다.
퍼가실 분들은 각자의 스타일과 ux에 맞게 사용하시길 바란다.
아래는 jQuery코드이다.
jQuery코드는 생각보다 간단하다.
HTML 코드 설명:
<div class="tab-container">는 탭 메뉴 컨테이너를 감싸는<div>요소이다.<ul class="tab-menu">는 탭 메뉴를 나타내는<ul>요소이다.<li>요소 안에<a>요소를 사용하여 각 탭 메뉴 항목을 만든다.<div>요소로 각 탭 메뉴의 내용을 구성한다.- 각 탭 메뉴의 href 속성을 사용하여 해당하는 내용의 ID를 참조한다.
CSS 코드 설명:
.tab-container클래스는 탭 메뉴 컨테이너의 스타일을 설정한다..tab-menu클래스는 탭 메뉴 항목의 스타일을 설정한다..tab-content클래스는 탭 메뉴 내용의 스타일을 설정한다..active클래스는 활성화된 탭 메뉴 항목과 해당하는 내용을 스타일링한다.
jQuery 코드 설명:
$(document).ready()함수는 페이지가 로드되었을 때 실행된다.$('.tab-menu a').click()함수는 탭 메뉴 항목의 클릭 이벤트를 처리한다.event.preventDefault()는 기본 동작을 막습니다.$(this).addClass('active').parent().siblings().find('a').removeClass('active')는 클릭한 탭 메뉴 항목에 active 클래스를 추가하고,
형제 요소들에서 active 클래스를 제거한다.$($(this).attr('href')).addClass('active').siblings().removeClass('active')는 클릭한 탭 메뉴 항목의 href 속성 값을 사용하여 해당하는 내용의 ID를 선택하고, active 클래스를 추가하고, 형제 요소들에서 active 클래스를 제거한다.
위 코드를 실행하면 세로로 된 탭 메뉴가 생성되며, 각각의 탭을 클릭하면 해당하는 내용이 보여지도록 구현되어 있다.
CSS를 사용하여 탭 메뉴와 내용의 스타일을 지정하고, jQuery를 사용하여 클릭 이벤트를 처리하여 탭을 활성화하고 해당하는 내용을 보여준다.
위 코드에서는 document.ready() 함수를 사용하여 페이지가 로드될 때 jQuery 코드가 실행되도록 한다.
그리고 tab-menu 클래스를 가진 ul 요소 안에 있는 a 요소가 클릭되었을 때,
이벤트 객체의 preventDefault() 메서드를 호출하여 기본 동작을 막아준다.
그리고 클릭한 요소에 active 클래스를 추가하고,
해당 요소의 부모 요소의 형제 요소들에서 a 요소를 찾아 active 클래스를 제거한다.
마지막으로 클릭한 요소의 href 속성 값과 매칭되는 div 요소에 active 클래스를 추가하고,
형제 요소들에서 active 클래스를 제거하여 해당 요소를 보여준다.
위 코드를 실행하면 세로로 된 탭 메뉴가 생성되며,
각각의 탭을 클릭하면 해당하는 내용이 보여지도록 구현되어있다.
코드들을 그대로 복사해서 사용해도 무방하고,
상황에 맞게, 본인의 스타일에 맞게 알아서 잘 적용해서 쓰자.