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);