[Javascript] 간단한 탭메뉴 자바스크립트로 제작하기 <tab menu>

 

 

1. HTML 마크업

<div class="container">
	<!--tab menu-->
	<ul class="tabs">
          <li class="tab-list current" data-tab="tab-1">메뉴01</li>
          <li class="tab-list" data-tab="tab-2">메뉴02</li>
          <li class="tab-list" data-tab="tab-3">메뉴03</li>
	</ul>
	<!--//tab menu-->
    
    <!--tab content-->
	<div id="tab-1" class="tab-content current">내용01</div>
	<div id="tab-2" class="tab-content">내용02</div>
	<div id="tab-3" class="tab-content">내용03</div>
    <!--//tab content-->
</div>

 

 

우선 HTML 코드로 탭 메뉴 리스트들과 그 메뉴를 선택했을 때 나타나는 탭 컨텐츠를 제작합니다.

 

* 탭 메뉴 리스트 : ul.tabs > li.tab-list

* 탭 컨텐츠 영역 : div.tab-content

 

 

 

 

2. Javascript

$(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})

})

 

자바스크립트 기반으로 제작 된 제이쿼리 라이브러리를 이용해서 탭 메뉴 클릭스

켄텐츠가 메뉴 리스트에 맞는 내용으로 나타나도록 스크립트를 제작한다.