参考文档：http://www.css88.com/jquery-ui-api/tabs/
html代码：
<div id="tabs">
<ul>
<li id="tab1Li"><a href="tab1.html">tab1</a></li> <!--tab1使用ajax引入，tabs（）可以自己调用ajax方法-->
<li><a href="#tab2">tab2</a></li>
<li><a href="#tab3">tab3</a></li>
</ul>
<!-- <div id="tab1">tab1-content</div> -->
<div id="tab2">tab2-content</div>
<div id="tab3">tab3-content</div>
</div>
js代码：
$("#tabs").tabs({
collapsible : true, //当设置为 true时，激活的面板可以被关闭
disabled : false, //Boolean or Array: 一个数组。包含从零开始计数的应该禁用选项卡的索引，例如，[ 0, 2 ]将禁用第一和第三个选项卡。
event : "click", //激活选项卡的事件类型。 要悬停（hover）激活选项卡，用"mouseover"。
active : 0, //Boolean:设置 active 为 false 将折叠所有的panel（面板）。这要求 collapsible 选项必须为 true。
//Integer: 激活打开的panel（面板）索引，以零为基础。负值则表示从最后一个panel（面板）后退选择panel（面板）。
heightStyle : "content", //"auto": 所有的panel（面板）将会被设置为最高的panel（面板）的高度。
//"fill": 基于 tabs 的父元素的高度，扩展到可用的高度。
//"content": 每个panel（面板）的高度取决于它的内容。
//hide : { effect: "blind", duration: 1000 },
//show : { effect: "blind", duration: 1000 },
create : function(event, ui){ //当创建 tabs（选项卡) 时触发。如果 tabs（选项卡) 是关闭的，ui.tab 和 ui.panel 将是空的 jQuery 对象。
//alert("新建一个活动卡时触发");
//alert(ui.tab.html());
//alert(ui.panel.html());
},
activate : function(event, ui){
//alert("切换到一个活动卡时触发");
//alert(ui.newTab.html()); //刚被激活的选项卡。
//alert(ui.oldTab.html()); //刚被取消激活的选项卡。
//alert(ui.newPanel.html()); //刚被激活的面板。
//alert(ui.oldPanel.html()); //刚被取消激活的面板。
},
beforeActivate : function(event, ui){
//alert("切换到一个活动卡之前触发");
//alert(ui.newTab.html()); //刚被激活的选项卡。
//alert(ui.oldTab.html()); //刚被取消激活的选项卡。
//alert(ui.newPanel.html()); //刚被激活的面板。
//alert(ui.oldPanel.html()); //刚被取消激活的面板。
},
load : function (event, ui){ //远程ajax选项卡加载后触发该事件
//alert(ui.tab.html()); //ui包含 tab 和 panel 两个属性
//alert(ui.panel.html());
},
beforeLoad : function(event, ui){
//alert("一个远程选项卡被加载之前触发");
//alert(ui.tab.html()); //属性一：tab
//alert(ui.panel.html()); //属性二：panel,加载之前为空
ui.jqXHR.success(function(responseText,statusText){ //属性三：jqXHR，被请求内容的 jqXHR 对象
//alert(responseText);
//alert(statusText);
});
//ui.ajaxSettings.url = "url地址"; //属性三：ajaxSettings，用于由jQuery.ajax请求内容的设置。
},
});
//tabs方法
//$("#tabs").tabs("disable"); //禁用所有tabs
//$("#tabs").tabs("disable", 0); //禁用第一个tab
//$("#tabs").tabs("enable"); //启用tab
//$("#tabs").tabs("enable", 0); //启用第一个tab
$("#tab1Li").click(function() {
$("#tabs").tabs("load", 0); //当点击选项时，重新加载远程选项卡的面板内容
});实现效果：