[JSP] Tab기능 구현

 

탭별 화면 호출하여 사용하는 예시

---

 

HTML

---

<tr>
	<td >
		<div style="width:97%; padding:10px 10px 10px 10px">
			<!-- Tab -->
			<div id="container">
				<ul class="tabs">
					<li class="active" rel="tab1">세입</li>
					<li rel="tab2">세출</li>
					<li rel="tab3">결산</li>
				</ul>
			</div>
			<!-- //Tab -->
		</div>
	</td>
</tr>

 

 

SCRIPT

---

$(function(){
	$("#tab1").load("../aaa/SeipView.do");

	$(".tabs li").css("width", "120");

	$("ul.tabs li").click(function () {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");

		var activeTab = $(this).attr("rel");
		$("#" + activeTab).fadeIn();

		if(activeTab == "tab1"){
			$("#" + activeTab).load("../aaa/SeipView.do");
		}else if(activeTab == "tab2"){
			$("#" + activeTab).load("../aaa/SechulView.do");
		}else if(activeTab == "tab3"){
			$("#" + activeTab).load("../aaa/GyulsanView.do");
		}
	});
});