Question

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

我正在做的是创建了一个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>

在我填充了所有内容后，我调用了标签功能：

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

我通过改变方法解决了这个问题。我创建了带有虚拟标签的tabs div并将其删除，然后隐藏了标签div：

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

之后，我会调用标签添加方法，并将我的文件信息div添加到新创建的标签中：

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

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

1 个答案: