删除动态JQuery UI选项卡

我正在创建一个web应用程序，我想使用Tabs小部件复制大多数web浏览器中的选项卡功能。我希望用户能够：移动（排序）选项卡，动态创建选项卡，动态关闭选项卡

我在删除已移动的选项卡时遇到问题

假设有三个选项卡名为：

一，二，三

如果我移动“一”，则选项卡如下所示：

二，三，一

当我删除索引为2的“一”时，会删除选项卡“三”。因此，选项卡现在是：

二，一

---

我已经测试了许多不同的场景，在我看来，当我删除一个选项卡时，JQueryUI会删除最初具有索引值的错误选项卡，而不是当前具有索引值的选项卡

您是对的，当您对选项卡重新排序时，这些选项卡会保留其旧索引值，从而在尝试删除某个选项卡时导致意外行为。您可以通过在删除之前重新初始化选项卡来强制它更新索引，如下所示：

$('#tabs').tabs('destroy').tabs();
$('#tabs').tabs('remove', 2);

这是因为索引是在基于DOM中

li

元素的位置设置选项卡时生成的。移动选项卡时，DOM中的

li

位置会更新，即使它们的索引值在选项卡插件中没有更改

---

当然，如果您有一个非常复杂的设置，这可能会对性能产生负面影响，在这种情况下，您可以找到其他方法来更新选项卡索引，或者可以维护一个将原始索引映射到当前索引的数组。

我通过以下方式临时解决了问题：

.click(function(e) {
$tab.tabs('remove',$tab.tabs('option','selected'));
});

令人烦恼的是，删除已不再存在。现在必须删除呈现选项卡和面板本身的HTML并刷新选项卡：

function removeTab(tabId) {
  var tabIdStr = "#tabs-" + tabId

  // Remove the panel
  $( tabIdStr ).remove();
  // Refresh the tabs widget
  tabs.tabs( "refresh" );

  // Remove the tab
  var hrefStr = "a[href='" + tabIdStr + "']"
  $( hrefStr ).closest("li").remove()
}

---

我希望有办法“刷新”索引。谢谢。这项技术现在实际上给我带来了一个bug——当我在运行时创建新选项卡时，destroy方法会删除所有运行时选项卡以及预期的选项卡。这里也是。它删除了所有内容。我发现您可以传递预期选项卡的href而不是索引，它会根据选项卡保留的内部索引将其转换为“正确”索引。这是使用jQueryUI1.8.11，我没有用任何其他版本测试过。我不知道为什么jQueryUI不使用ID作为选项卡和索引，这种方式也给我们带来了一大堆麻烦。