jQuery UI 选项卡 -- 多个动态创建的选项卡，选项卡内容全部显示在一个选项卡中

Question

我正在开发网络应用程序，该应用程序应该检索和显示有关已在服务器端处理的文件的信息。我正在尝试在每个已处理文件的选项卡中显示从服务器返回的数据。

我正在做的是我创建了一个 div 作为标签的容器，我的标签链接为空 ul：

<div id="fileInfo"><ul id="infoTabs"></ul></div>

当我收到我的数据时，我首先附加一个新的

到我的 ul 每个文件：

<li>

file1 的信息

我在我的 fileInfo div 中为每个文件添加一个新的 div：

<div id="file1">
Info for file1
<br>
<ul>
<li>
Blah blah
<br>
blah blah blah
</li>
</ul>
</div>

填充完所有内容后，我调用 tabs 函数：

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

如果我有多个文件，我将有一个选项卡表单，其中包含每个文件的选项卡标题，但包含文件信息的 div 中的所有内容都在第一个选项卡中。如果我单击其他选项卡的选项卡标题，文档将跳转到第一个选项卡的部分，其中显示应该在其自己的选项卡中的 div。我查看了 Firebug 中的 HTML 选项卡，在我看来，文档中的所有内容都已正确填充，以便选项卡正确显示：

    <div id="fileInfo" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul id="infoTabs" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#file1">Info for file1</a>
</li>
<li>
<a href="#file2">Info for file2</a>
</li>
</ul>
<div id="file1">
Info for file1
<br>
<ul>
<li>
file1, blah blah
<br>
yackity smackity
</li>
</ul>
</div>
<div id="file2">
Info for file2
<br>
<ul>
<li>
file2, blah blah
<br>
yackity smackity
</li>
</ul>
</div>
</div>

我现在有点卡住了。任何有关我可能遗漏的信息将不胜感激。

Answer 1

我通过改变方法解决了这个问题。我使用虚拟选项卡创建了选项卡 div 并将其删除，然后隐藏了选项卡 div：

$("#fileInfo").tabs();
        $("#fileInfo").tabs('remove', 0);
        $("#fileInfo").hide();

之后，我会调用 tabs add 方法，并将我的文件信息 div 添加到新创建的选项卡中：

tabs('add', '#'+ fileName, tabTitle);
 $('#'+ fileName).html(cont);