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

Question

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

下面是我要做的一个简单的JSFiddle：http://jsfiddle.net/dmchale92/Wa69N/

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

$(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();
});

有人能向我解释为什么新的选项卡标题不保持其他选项卡的样式，为什么内容被添加到容器的底部而不是分页？

Answer 1

您需要刷新它：文档

演示

$("#tabs").tabs( "refresh" );

Answer 2

你得这么做

$(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();
});

http://jsfiddle.net/farrukhsubhani/Wa69N/2/