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

Question

我正在处理应用程序，它应该检索并显示已处理服务器端文件的信息。我试图在处理每个文件的选项卡中显示从服务器返回的数据。

我在做什么是我创建了一个div来作为我的标签的容器，用空UL为我的选项卡链接：

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

当我收到我的数据，我第一次追加新

我UL为每个文件：

<li> 

信息的文件1

我追加一个新的div我的fileInfo DIV中的每个文件：

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

我填充我的所有内容后，我称之为标签功能：

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

在那之后，我会打电话的标签添加方法，并加入我的文件信息的div到新创建的标签：

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