Question

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

我在删除已移动的标签时遇到问题。

让我们说有三个标签名为：

一，二，三。

如果我移动“one”，那么标签就像：

二，三和一

当我删除索引为2的“one”时，删除标签“3”。所以标签现在是：

两个，一个。

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

Answer 1

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

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

这是有效的，因为在根据DOM中li元素的位置设置选项卡时会生成索引。当您移动选项卡时，li位置会在DOM中更新，即使它们的索引值在Tabs插件中没有更改。

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

Answer 2

恼人地删除不再在jQueryUI tab API中。您现在必须删除呈现选项卡和面板本身的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()
}

https://forum.jquery.com/topic/dynamically-remove-tab

Answer 3

我以这种方式暂时解决了这个问题：

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

删除动态JQuery UI选项卡

3 个答案: