javascript - jQuery tabs "add"方法创建两个 <div> 元素

Question

jQuery 的选项卡 ui 中的“添加”方法向我的“#tabs”元素添加了一个额外的选项卡面板 div，这让我很沮丧。这是我用来添加显示通过 Ajax 获取其内容的日历的选项卡的代码行:

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

最初只有一个选项卡，现在应该有两个。实际上，<ul> 中现在存在两个选项卡。元素，但现在神秘地有三个 <div>标签面板对应的元素如下所示。如果不是因为新创建的 <div> 之一，这不会成为问题。 elements 没有隐藏，即使它对应于一个非事件选项卡。结果，<div> ，虽然是空的，但在我的第一个和原始选项卡面板的底部占用了一 block 空间。抱歉代码困惑，但我包含了所有原始 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 被调用，它创建了没有“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 在创建选项卡时为 true，在添加新选项卡时为 false。还有一个调用 _tabify 且 b=false 的函数，它是 _setOption。但是我不知道这个添加的代码是否会破坏它。