jQuery UI Tabs Demo

<script type="text/javascript" src="<%=path %>/js/jquery-1.2.6.js"></script>
<script src="<%=path%>/js/ui.core.js" type="text/javascript"></script>
<link href="<%=path%>/css/ui.tabs.css" rel="stylesheet" type="text/css" />
<script src="<%=path%>/js/ui.tabs.js" type="text/javascript"></script>

<SCRIPT>	
$(function() {
		$( "#tabs" ).tabs();
	});
</SCRIPT>

<DIV class=demo>
<DIV id=tabs>
<UL>
<LI><A href="#tabs-1">第一个Tab</A></LI>
<LI><A href="#tabs-2">第二个Tab</A></LI>
<LI><A href="#tabs-3">第三个Tab</A></LI></UL>
<DIV id=tabs-1>
<P>第一个Tab.</P></DIV>
<DIV id=tabs-2>
<P>第二个Tab.</P></DIV>
<DIV id=tabs-3>
<P>第三个Tab（第一段）.</P>
<P>第三个Tab（第二段）.</P>
</DIV></DIV></DIV>
<!-- End demo -->
<DIV style="DISPLAY: none" class=demo-description>
<P>Click tabs to swap between content that is broken into logical sections.</P>
</DIV><!-- End demo-description -->

Tab操作：
Initialize a tabs with the disabled option specified. 
$( ".selector" ).tabs({ disabled: true });
Get or set the disabled option, after init. 
//getter
var disabled = $( ".selector" ).tabs( "option", "disabled" );
//setter
$( ".selector" ).tabs( "option", "disabled", true );

$("#tabs").tabs('select', 0);  //定位明细tab页，选择第一个Tab
$("#tabs").tabs('enable', 2);  //设置第三个Tab可用
$("#tabs").tabs('option', 'disabled', [0,2]);//设置第1个和第3个tab不可用

参考：http://docs.jquery.com/UI/Tabs

     http://jqueryui.com/demos/tabs/

  http://layout.jquery-dev.net/demos/tabs.html

jQuery UI Layout Plug-in：http://layout.jquery-dev.net/index.cfm