2

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

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

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

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

  • 对于每个文件，我的 ul：

    <li>

    文件 1 的信息

    • 我在我的 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>

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

    4

    1 回答 1

    1

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

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

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

    tabs('add', '#'+ fileName, tabTitle);
 $('#'+ fileName).html(cont);
    于 2012-07-24T21:37:57.487 回答