Jquery UI选项卡：关闭选项卡时如何隐藏选项卡及其对应的div答案

【问题标题】：Jquery UI Tabs: How do i hide a tab and its corresponding div when i close itJquery UI选项卡：关闭选项卡时如何隐藏选项卡及其对应的div
【发布时间】：2010-04-20 13:15:52
【问题描述】：

我使用过 Jquery UI 选项卡，并为选项卡提供了关闭选项。默认情况下，我正在创建三个选项卡及其对应的三个 div。现在，当我关闭一个选项卡时，该选项卡及其 div 将被删除。我只需要隐藏选项卡和 div，当我单击添加选项卡时，我应该只显示隐藏的选项卡和 div。我不确定如何显示/隐藏 tab 和 div 属性。

提前致谢。

杰维

【问题讨论】：

标签： jquery-ui-tabs

【解决方案1】：

根据http://old.nabble.com/UI-Tabs:-How-to-hide-show-a-Tab-td19569388s27240.html 的讨论，以下内容对我有用 -

添加以下 CSS

.ui-tabs .ui-state-disabled { 
    display: none; /* disabled tabs don't show up */ 
}

然后使用以下任一形式的选项卡禁用选项 -

$( ".selector" ).tabs({ disabled: [1, 2] }); //when initializing the tabs
$( ".selector" ).tabs( "option", "disabled", [1, 2] ); // or setting after init

有关详细的 jQuery 文档，请参阅 http://jqueryui.com/demos/tabs/#option-disabled

【讨论】：

我不建议使用.ui-tabs .ui-state-disabled { display: none; }，因为如果您在非禁用选项卡上有任何禁用的 JQueryUI 元素（例如暂时禁用的按钮），它们也会被隐藏。我会将其更改为.ui-tabs>.ui-tabs-nav>.ui-state-disabled，因此只有选项卡会被隐藏。注意：这是针对 JQueryUI 1.9.2
我以前使用过基于隐藏 li 元素的方法，但这与选项卡之间的键盘导航交互很糟糕：单击其中一个可见选项卡并重复按右箭头最终将显示来自一个隐藏的标签。这个答案使导航正常工作。

【解决方案2】：

$(".selector ul li:eq("+index+")").hide();

【讨论】：

【解决方案3】：

我刚刚测试了两个选项卡，您可以添加所需的逻辑以使其可用于 N 个选项卡。

为此，您默认打开第一个选项卡，然后打开第二个选项卡然后：

$("#yourTabHref").parent().children(":first").children(":first").next().hide();

解释： parent 用于转到标签的 div，然后 children(":first") 将您移动到 ul，然后再次为 children(":first")将您移动到 第一个 li，但我们将隐藏第二个选项卡，这意味着 第二个 li 这就是使用 next() 的原因，现在我们在第二个选项卡，然后将其隐藏。

最后，只是隐藏标签内容：

$("#yourTabHref").hide();

再次显示所有内容：

$("#yourTabHref").parent().children(":first").children(":first").next().show();
$("#yourTabHref").hide();

【讨论】：

【解决方案4】：

现在回答这个问题可能还为时不晚。我所做的是给 html li 一个 id

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">New Item</a></li>
    <li><a href="#tabs-2">Product</a></li>
    <li><a href="#tabs-3">Purchase Order</a></li>
    <li><a href="#tabs-4">Administration</a></li>
    <li><a href="#tabs-5">License</a></li>
    <li **id="tab-6"**><a href="#tabs-6">Test</a></li>
    <li><a href="#tabs-7">Specific Product</a></li>
    <li><a href="#tabs-8">Support</a></li>
  </ul>

然后我使用 JQuery 代码 $('#tab-6').hide(); 隐藏并使用 $('#tab-6').show(); 显示选项卡。

希望这会有所帮助干杯

【讨论】：

【解决方案5】：

这也困扰了我一段时间，我最终编写了一个小插件来简化它。您可以在这里查看：KylesTechnobabble（带有 JSFiddle 示例）。

注意：这是针对 jQuery UI 1.9.2 的。我还没有测试过其他任何东西。

【讨论】：

【解决方案6】：

不能 100% 确定具体代码，但可以尝试这样的方法来隐藏和不删除选项卡：

$( ".selector" ).tabs({
    remove: function(event, ui) { $(this).hide(); return false; }
});

【讨论】：

嗨 MDCore，非常感谢您的回复。我尝试了这段代码，但没有奏效。首先我打电话给 $( ".selector" ).tabs('remove', index);在此之后，选项卡被删除。如果我再次调用您的函数，则元素本身不存在。

【解决方案7】：

这是另一个我相信更简单的解决方案 - 只需隐藏 li 标签。在我的例子中，标签有“data-carrier-id”类：

var tabs = $("li[data-carrier-id]");
tabs.hide();

然后你可以显示一个特定的标签：

$("li[data-carrier-id=" + carrierId + "]").show();

隐藏和显示选项卡隐藏和显示相应的div。

这是一个皱纹。更改选项卡可见性后，必须更改所选选项卡。这是设计使然。即使使用“选项”“禁用”，也无法禁用选定的选项卡。这个比较容易修复，只需要遍历可见的标签，找到第一个可见的索引：

var firstVisibleTabIndex;
tabs.each(function (index) {
  if ($(this).is(":visible")) {
     firstVisibleTabIndex = index;
     return false;
   }
 });
 var jqTabs = $("#tabs").tabs();
 jqTabs.tabs("option", "active", firstVisibleTabIndex);

【讨论】：