jQuery UI Tabs Demo

最新推荐文章于 2022-05-15 21:29:27 发布

Rosanu

最新推荐文章于 2022-05-15 21:29:27 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： tabs jquery ui stylesheet path class

本文链接：https://blog.csdn.net/rosanu_blog/article/details/8022879

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<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