利用ui.tabs.js生成一级菜单，一般都很简单。
不过实际应用中，二级菜单更具备实用性，用ui.tabs.js达到目的也很简单。
以下示例在jquery1.3.2和jquery ui1.7.2中通过。
javascript导入如下：
<script language="javascript" src="jquery-1.3.2.min.js"></script><script language="javascript" src="ui.core.js"></script><script language="javascript" src="ui.tabs.js"></script>
css导入如下：
<link type="text/css" href="css/ui.core.css" rel="stylesheet" /><link type="text/css" href="css/ui.tabs.css" rel="stylesheet" /><link type="text/css" href="css/ui.theme.css" rel="stylesheet" /><link type="text/css" href="css/demos.css" rel="stylesheet" />
其中demos.css是jquery.ui下载包中示例的样式，里面包括字体的定义，可以用自己定义的。
一级菜单定义如下：
<div id="tabsEx1"> <input type="button" οnclick="$('#tabsEx1 > ul').tabs('add', '#appended-tab', 'New Tab');" value="Add new tab"> <input type="button" οnclick="$('#tabsEx1 > ul').tabs('add', '#inserted-tab', 'New Tab', 1);" value="Insert tab"> <input type="button" οnclick="$('#tabsEx1 > ul').tabs('disable', 1);" value="Disable tab 2"> <input type="button" οnclick="$('#tabsEx1 > ul').tabs('enable', 1);" value="Enable tab 2"> <input type="button" οnclick="$('#tabsEx1 > ul').tabs('select', 2);" value="Select tab 3"> <br><br> <ul style="height: 30px;"> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul>
//这里正常情况是应该填入id分别为fragment-1、fragment-2、fragment-3的div</div>
上面一级菜单定义缺少了内容模版格式的定义，我们在其中填入二级菜单内容定义：
<div id="fragment-1" class="fragment"> <ul style="height: 30px;"> <li><a href="#fragment-content"><span>One-1</span></a></li> <li><a href="#fragment-content"><span>One-2</span></a></li> <li><a href="#fragment-content"><span>One-3</span></a></li> </ul> </div> <div id="fragment-2" class="fragment"> <ul style="height: 30px;"> <li><a href="#fragment-content"><span>Two-1</span></a></li> <li><a href="#fragment-content"><span>Two-2</span></a></li> <li><a href="#fragment-content"><span>Two-3</span></a></li> </ul> </div> <div id="fragment-3" class="fragment"> <ul style="height: 30px;"> <li><a href="#fragment-content"><span>Three-1</span></a></li> <li><a href="#fragment-content"><span>Three-2</span></a></li> <li><a href="#fragment-content"><span>Three-3</span></a></li> </ul> </div>
<div id="fragment-content"> <p>Three</p> </div> 可以看到，二级菜单的内容模版定义均为<div id="fragment-content">......</div>。
在实际应用中，菜单最终刷新的内容区域仅采用一个DIV定义来实现是最为方便的。
基于以上的HTML格式，我们还需要进行tabs定义。
$(function(){ $("#tabsEx1").tabs({ show:function(event,ui){ var idx = ui.index; $("#fragment-"+(idx+1)).tabs("select",0); }, //全部置为-1，是让一级菜单的初始化选择能触发show事件 selected:-1 }); $(".fragment").tabs({ select:function(event,ui){ //这里最适合用来通过判断来显示DIV ID为fragment-content的内容 $("#fragment-content").html("successfully load fragment content-"+$("#tabsEx1").tabs("option","selected")+":"+ui.index); }, //全部置为-1，是让一级菜单的初始化触发show事件，其中的执行动作能够触发二级菜单的select事件 selected:-1 }); $("#tabsEx1").tabs("select",0);});
以上示例测试过，如果有什么问题，可以留言。
