jQuery tabs "add" 方法创建两个 <div> 元素答案

【问题标题】：jQuery tabs "add" method creates two <div> elementsjQuery tabs "add" 方法创建两个 <div> 元素
【发布时间】：2011-09-08 21:15:40
【问题描述】：

jQuery 的选项卡 ui 中的“add”方法正在向我的“#tabs”元素添加一个额外的选项卡面板 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> 元素。

【问题讨论】：

请包含更多代码，eps 您启动选项卡的部分。

标签： javascript jquery-ui

【解决方案1】：

我也遇到了同样的问题。我也使用 AJAX 选项卡。

于是我查看了 JQuery UI 的源代码。

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

这两个函数都使用_tabId获取新标签页的id，并使用u()函数获取标签页的索引。

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

但是u() 以这种方式使用变量v：++v，所以它给你索引并加1。

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

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

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

【讨论】：

【解决方案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 容器......它在页面上垂直增长标签。

【讨论】：