jQuery 탭 페이지 만들기

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

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

처음에 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>