Javascript 如何使用onclick处理程序在jqueryui中添加选项卡？

我试图将选项卡信息附加到现有的jqueryui选项卡容器中，然后重新初始化选项卡容器以更新内容

下面是我尝试做的一个简单的JSFIDE：

下面是我用来附加基本测试段落的函数：

$(function () {
a = "<div id='tabs-4'><p>This is a test paragraph.</p></div>"
b = "<li><a href='#tabs-4'>Blog Four</a></li>"
$("#tabs").append(a);
$("#tablist").append(b);
$("#tabs").tabs();
});

$（函数（）{
a=“这是一个测试段落。
”
b=“
”
$（“#制表符”）。附加（a）；
$（“#小报”）。附加（b）；
$（“#制表符”）.tabs（）；
});

有人能给我解释一下为什么新的标签标题没有保留其他标签的样式，为什么内容被添加到容器外部的底部而不是分页？

您需要这样做

$(function () {
$('#tabs').tabs("destroy");
a = "<div id='tabs-4'><p>This is a test paragraph.</p></div>"
b = "<li><a href='#tabs-4'>Blog Four</a></li>"
$("#tabs").append(a);
$("#tablist").append(b);
$("#tabs").tabs();
});

$（函数（）{
$（'#tabs'）。tabs（“销毁”）；
a=“这是一个测试段落。
”
b=“
”
$（“#制表符”）。附加（a）；
$（“#小报”）。附加（b）；
$（“#制表符”）.tabs（）；
});

您需要刷新它：

---

我没有真正检查这个插件，但通常你需要在之前销毁它：

$（“#tabs”）.tabs（'destroy'）.tabs（）编辑：请参见编辑：最好使用刷新方法哦，天哪。多谢各位@a-wolff的答案甚至更好，只要刷新一下就可以了。
$("#tabs").tabs( "refresh" );