개발/Javascript

jQuery 탭 페이지 만들기

신매력 2013. 4. 9. 11:23

아래 그림처럼 위에 탭 메뉴를 만드는 방법을 정리한다.



탭을 지정할 새로운 페이지가 필요하다. 

처음에 tab 페이지를 호출하게 되면 tab1의 내용이 아래 선언된 div 안에 나타나게 된다. 
주소 매핑만 잘해주면 잘 실행될 것이다.

<script type="text/javascript">

// 페이지가 로드될 때 기본적으로 첫번째 tab이 기본적으로 설정되도록 한다
$(document).ready(function(){
$("#tabs").tabs();
getContentTab(1);
});

function getContentTab(index){
var url="/user/list" + index;  
var targetDiv = "#tabs-" + index; 

$.get(url, null, function(result){
$(targetDiv).html(result);   // 해당 div에 결과가 나타남
});
}
</script>

<div id="tabs">
<ul>
<li><a href="#tabs-1" onclick="getContentTab(1);">Tab1</a></li>
<li><a href="#tabs-2" onclick="getContentTab(2);">Tab2</a></li>
</ul>

그리드가 나타날 페이지가 통째로, 각 탭에 따라서 아래 div에 들어간다 
<div id="tabs-1"></div>      
<div id="tabs-2"></div>
</div>