jQuery Tab 正在缓存 TabID

Question

我这样定义了 jQuery 选项卡：

 $('#serviceTabs').tabs({
    idPrefix: 'ui-subtabs-',
    spinner: 'Retrieving data...',
    cache: false,
    select: function(event, ui) {
        if(checkServiceTabs(ui.index))
        {
            $('#ui-subtabs-'+(currentDetailTab+1)).html(" ");
            currentDetailTab = ui.index;
            return true;
     }
        else
            return false;
    },
    collapsible: true
});

不幸的是，在重新加载页面后，选项卡的索引逐渐增加。 因此，在第一次请求时，我的 TabID 看起来像：

#ui-subtabs-1, #ui-subtabs-2, #ui-subtabs-3

重新加载页面后，它看起来像：

#ui-subtabs-4, #ui-subtabs-5, #ui-subtabs-6

副作用是，选项卡在重新加载后被锁定。 select 事件不再起作用。

仅供参考：选项卡位于 DIV 中，并与 $.get 函数合并。 所以我不重新加载整个页面，而只重新加载 div。

在新请求之前，我已经用 .html(" ") 空白了 div，并且我也尝试过

$('#serviceTabs').tabs("destroy");

有人知道如何删除 TabID 缓存吗？

Answer 1

不幸的是，TabID 所来自的 tabIndex 变量被封装在 Tabs 插件的匿名函数中，使其对外界完全不可见。它只是递增，并且插件没有提供重置它的方法。即使销毁插件的实例也无济于事。

不过，在插件文档的概述页面上，指定可以使用选项卡容器进行引用用作选项卡按钮的 元素的 Title 属性。

然后，您将为选项卡按钮添加这种标记：

<li><a href="hello/world.html" title="My Tab 1"> ... </a></li>

这将创建标题为 ID 的选项卡容器（用下划线替换空格）：

<div id="My_Tab_1"> ... </div>

然后，您必须相应地修改您的选择方法。