Question

我对jQuery的标签ui中的“add”方法向我的“#tabs”元素添加一个额外的tab-panel div感到沮丧。这是我用来添加选项卡的代码行，该选项卡显示通过Ajax获取其内容的日历：

$("#tabs").tabs("add", "tabContent.php?id=48&tab=calendar", "Calendar");

最初只有一个标签，现在应该有两个标签。实际上，<ul>元素中现在存在两个选项卡，但现在神秘地存在三个与选项卡面板对应的<div>元素，如下所示。如果不是因为新创建的<div>元素之一未被隐藏，即使它对应于非活动选项卡，这也不会成为问题。因此，<div>虽然为空，但会在我的第一个原始标签面板的底部占用一块空间。很抱歉杂乱的代码，但我包含了所有原始的jQuery标记，以准确显示jQuery的功能。

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul 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="#tabs-1">Tab 1</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#ui-tabs-2"><span>Calendar</span></a></li>
    </ul>
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
            Original Tab
    </div>

    <!-- Why are there two divs here?? -->
    <!-- Note that first <div> below not given class 'ui-tabs-hide' -->
    <div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
    <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>

注意底部的两个<div>元素应该只有一个。

Answer 1

我遇到了同样的问题。我也使用AJAX标签。

所以我查看了JQuery UI的源代码。

函数add创建了这个额外的div，但随后调用了函数_tabify，它创建了额外的div而没有'ui-tabs-hide'类。我认为，它创造了额外的div，因为它无法找到第一个。

两个函数都使用_tabId来获取新选项卡的ID，并使用u()函数获取选项卡的索引。

它不起作用的原因是u()被调用两次，在add和in tabify函数中。

但u()以这种方式使用变量v：++v，因此它会为您提供索引并添加1。

所以在add函数div中创建了id为'ui-tabs-1'，但在tabify中你会得到另一个id ='ui-tabs-2'，找不到它而另一个div被创建

我试过了：在第二次调用_tabId if(!b)v--之前添加了i=a._tabId(f);。它在_tabify函数中。

创建选项卡时，var b为true，添加新选项卡时为false。还有一个函数调用_tabify，其中b = false，它是_setOption。但我不知道这些添加的代码是否会破坏它。

Answer 2

我有同样的问题。你有进展吗？

**编辑：见http://bugs.jqueryui.com/ticket/5069

**

$('#tabs').tabs('add', '${pageContext.request.contextPath}/tmijsp/mockups/engineTestContainer.jsp' , 'Engine Test' );

我添加了标签（这是出于模型目的）......我在容器中获得了相同的神秘标签。我还尝试在创建新标签之前删除所有标签：

for (var i = number - 1; i >= 0; i--) {
        alert('removing ' + i);
        $('#tabs').tabs('remove', i);
        alert('removed ' + i);
    }

这个循环似乎识别出非神秘的标签，但它看不到神秘的标签。 ......

所以，如果我添加1个标签，则会创建2个标签我通过循环从选项卡列表中删除所有..它标识1 ...并且神秘的div不会被删除。

如果我去重新添加说..另外2个标签，4个创建。当我删除它们时...显示的2被删除，很好......但神秘的div不会。

显示和功能都很好..除了我有这个不断扩大的神秘隐藏div的容器..它在页面上垂直生长标签。

jQuery选项卡“add”方法创建两个<div>元素</div>

2 个答案: