Question

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

提前致谢。

Jeevi

Answer 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

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

Answer 2

$（“。selector ul li：eq（”+ index +“）”）。hide（）;

Answer 3

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

为此，您默认打开第一个标签，然后打开第二个标签，然后：

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

<强>说明：父级用于转到选项卡的 div ，然后子级（“：first”）移动到 ul ，然后再移动子级（“：first”）移动到第一个li ，但我们将隐藏第二个标签，这意味着第二个li 这就是为什么要使用next（），现在我们在第二个标签，然后隐藏它。

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

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

再次展示一切：

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

Answer 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();显示选项卡。

希望这会有所帮助干杯

Answer 5

这也让我感到困扰了一段时间，我最后写了一个小插件让它变得简单。你可以在这里查看：KylesTechnobabble（带有JSFiddle示例）。

注意：这适用于jQuery UI 1.9.2。我没有测试任何其他东西。

Answer 6

对特定代码不是100％肯定，但尝试使用此类隐藏和删除选项卡：

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

Answer 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);

Jquery UI选项卡：当我关闭它时，如何隐藏选项卡及其对应的div

7 个答案: