根据
jquery-ui 1.9选项卡 –
http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method的升级指南 – 动态添加新选项卡时,只需要执行以下操作：
HTML：
<div id='tabs'>
<ul>
<li><a href='#tab1'>#1</a></li>
</ul>
<div id='tab1'></div>
</div>
<button id='add-tab'>Add tab</button>
JavaScript的：
$(document).ready(function() {
$("div#tabs").tabs();
$("button#add-tab").click(function() {
var num_tabs = $("div#tabs ul li").length + 1;
$("div#tabs ul").append(
"<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
);
$("div#tabs").tabs("refresh");
});
});
但是当我尝试在新创建的选项卡之间进行更改时,我在firebug中得到以下错误：
jQuery UI Tabs: Mismatching fragment identifier.
如果我理解正确,则此错误意味着实际的选项卡面板未被创建(因此导航面板和选项卡面板之间不匹配).但是,升级指南中没有提到创建选项卡面板.
所以我假设我做错了,或升级指南是不完整的.请澄清.
解决方法
指南必须不完整,您需要添加选项卡面板
$(document).ready(function() {
$("div#tabs").tabs();
$("button#add-tab").click(function() {
var num_tabs = $("div#tabs ul li").length + 1;
$("div#tabs ul").append(
"<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
);
$("div#tabs").append(
"<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>"
);
$("div#tabs").tabs("refresh");
});
});
