本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.9节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
在本章的前面，我们引入了折叠菜单微件来组织较大的内容集，并且一次只显示一组内容。选项卡元素具有相似的功能，只存在一些细微的差别。虽然不一定总是正确的，但我还是要说，折叠菜单适合作为主界面侧边上的一个扩展元素，而选项卡元素最好用做主界面本身。
代码清单7-9将一个相对简单的HTML结构转换成一组选项卡。折叠菜单和选项卡元素之间的一个差异是，选项卡的标题列表和内容是彼此分开的，但折叠菜单的标题和内容是一体的。
代码清单7-9 将无序列表转换为选项卡面板
00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Tabs</title> 05 <link type="text/css" rel="stylesheet" href= 06 "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css"> 07 <style> 08 body { 09 font-size: 12px; 10 } 11 </style> 12 </head> 13 <body> 14 15 <div id="my-tabs"> 16 <ul> 17 <li> 18 <a href="#first">First</a> 19 </li> 20 <li> 21 <a href="#second">Second</a> 22 </li> 23 <li> 24 <a href="#third">Third</a> 25 </li> 26 </ul> 27 <div id="first"> 28 This is the text of the first tab 29 </div> 30 <div id="second"> 31 You have switched to the second tab 32 </div> 33 <div id="third"> 34 And finally, you have switched to the third tab 35 </div> 36 </div> 37 38 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 39 <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"> 40 </script> 41 42 <script> 43 // 请将下列代码移至一个外部的.js文件中 44 $(document).ready(function() { 45 46 $('#my-tabs').tabs(); 47 48 }); 49 </script> 50 </body> 51 </html>在代码清单7-9中，选项卡的内容在第27～35行的div元素中。你可以很容易地把这个例子修改为使用AJAX从服务器获取内容。在这种情况下，你需要将href属性更改为服务器端的地址，它指向你想要显示在选项卡中的内容。内容需要和当前的HTML在同一服务器上。当你定义好这些引用时，在底层，选项卡组件会自动调用jQuery的load``()函数去加载HTML。此功能在第5章中做过演示。
7.9.1 为选项卡元素添加样式选项卡元素并没有对HTML做很多更改。它只是增加了很多类，通过这些类既可以用切换主题的方式也可以用自定义CSS样式的方式来装饰选项卡元素。
<div id="my-tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"> <a href="#first">First</a> </li> <li class="ui-state-default ui-corner-top"> <a href="#second">Second</a> </li> <li class="ui-state-default ui-corner-top"> <a href="#third">Third</a> </li> </ul> <div id="first" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> This is the text of the first tab </div> <div id="second" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" > You have switched to the second tab </div> <div id="third" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" > And finally, you have switched to the third tab </div> </div>加粗的代码是由选项卡组件添加的。带底纹高亮显示的代码依赖于当前哪个选项卡是打开的。本例中，第一个选项卡是打开的。
7.9.2 设置选项卡的选项正如jQuery UI的其他微件，选项卡微件有几个选项可以设置，用来改变默认行为。表7-6给出了可用于选项卡微件的选项的代码示例以及描述。
7.9.3 捕获选项卡的事件选项卡微件的事件可以在多个地方处理或触发。下面列出的代码片段可以作为处理事件的示例。
当一个新的选项卡微件初始化时进行的事件处理：
$('#my-tabs').tabs({create: function(event, ui) { // 事件处理 }}); //或 $('#my-tabs') .on('tabscreate', function(event, ui) { // 事件处理 }) .tabs();当一个不同的选项卡被点击时进行的事件处理：
$('#my-tabs').tabs({select: function(event, ui) { // 事件处理 }}); //或 $('#my-tabs').tabs() .on('tabsselect', function(event, ui) { // 事件处理 });当远端内容加载完成时进行的事件处理：
$('#my-tabs').tabs({load: function(event, ui) { // 事件处理 }}); //或 $('#my-tabs').tabs() .on('tabsload', function(event, ui) { // 事件处理 });当一个不同的选项卡显示时进行的事件处理：
$('#my-tabs').tabs({show: function(event, ui) { // 事件处理 }}); //或 $('#my-tabs').tabs() .on('tabsshow', function(event, ui) { // 事件处理 });当一个选项卡被添加时进行的事件处理：
$('#my-tabs').tabs({add: function(event, ui) { // 事件处理 }}); //或 $('#my-tabs').tabs() .on('tabsadd', function(event, ui) { // 事件处理 });当一个选项卡被移除时进行的事件处理：
$('#my-tabs').tabs({remove: function(event, ui) { // 事件处理 }}); //或 $('#my-tabs').tabs() .on('tabsremove', function(event, ui) { // 事件处理 });当一个以前被禁用的选项卡被启用时进行的事件处理：
$('#my-tabs').tabs({enable: function(event, ui) { // 事件处理 }}); //或 $('#my-tabs').tabs() .on('tabsenable', function(event, ui) { // 事件处理 });当一个以前被启用的选项卡被禁用时进行的事件处理：
$('#my-tabs').tabs({disable: function(event, ui) { // 事件处理 }}); //或 $('#my-tabs').tabs() .on('tabsdisable', function(event, ui) { // 事件处理 });7.9.4 调用选项卡的方法选项卡微件使用的方法与第6章讲的可拖曳交互组件以及对话框和折叠菜单微件相同。参阅这些章节来获得关于destroy、disable、enable、option和widget的详细内容。
在指定位置用指定的URL和选项卡标签来添加一个新选项卡：
$('#my-tabs').tabs('add', '/my-url', 'My Tab Label', 1);移除指定索引位置的选项卡：
$('#my-tabs').tabs('remove', 1);启用指定索引值的选项卡：
$('#my-tabs').tabs('enable', 1);禁用指定索引值的选项卡：
$('#my-tabs').tabs('disable', 1);选定指定索引值的选项卡：
$('#my-tabs').tabs('select', 1);重新加载指定选项卡的内容：
$('#my-tabs').tabs('load', 1);在指定索引值的选项卡上加载指定的URL：
$('#my-tabs').tabs('url', 1, '/my-url');获取选项卡组件选项卡的个数：
$('#my-tabs').tabs('length');中断所有的AJAX请求：
$('#my-tabs').tabs('abort');每隔2000毫秒自动循环选项卡。当用户选定了一个选项卡时停止循环，因为continuing 参数是false：
$('#my-tabs').tabs('rotate', 2000, false);
