如何隐藏空标签答案

【问题标题】：how to hide empty tabs如何隐藏空标签
【发布时间】：2012-09-05 01:14:07
【问题描述】：

我正在使用 jquery_ui 标签，我的标签看起来像这样：

<div id="mytabs">
  <ul>
    <li class="tab-one"><a href="#onepane">apples</a></li>
    <li class="tab-two"><a href="#twopane">berries</a></li>
    <li class="tab-three"><a href="#threepane">citrus</a></li>
  </ul>
  <div id="onepane">green apples, red apples</div>
  <div id="twopane">blueberries, raspberries </div>
  <div id="threepane"></div>
</div>

我的问题：

随着标签内容的变化，我想动态隐藏任何空标签。在上面的示例中，我想隐藏第三个选项卡“柑橘”，因为它对应的选项卡窗格不包含任何内容。有人知道怎么做吗？

【问题讨论】：

我查看了 jquery_ui 选项卡文档 (jqueryui.com/demos/tabs)，并通过 stackoverflow 和 google 进行了搜索，但没有找到任何解决我的问题的内容。
stackoverflow.com/questions/5383755/…

标签： jquery-ui jquery-ui-tabs

【解决方案1】：

您必须首先选择属于mytabs 的Tabs 然后遍历所有面板，选择空的并禁用它们。

重复 - jQuery UI Tabs - How can I remove tab list item if corresponding content panel is empty?

【讨论】：

我更仔细地查看了这个，我现在发现它并不是我想要的。我想隐藏（而不是删除）不需要的选项卡，并且我想随着选项卡内容的变化动态地执行此操作。我最终实施了以下解决方案。

【解决方案2】：

Nate 建议的This 方法并不能完全满足我的需求，我最终实施了以下解决方案。当用户采取更改某些选项卡内容的操作时，将触发以下代码。代码检查现在是否有任何选项卡为空，如果是，则隐藏空选项卡。此外，它还会检查所选选项卡现在是否隐藏，如果是，则将所选选项卡更改为第一个可见选项卡。

var mytabs = $('div#mytabs');
var selected = mytabs.tabs('option', 'selected'); // index of selected tab
mytabs.children('ul').children('li').children('a').each(function(index, elem) {
    if (mytabs.children($(elem).attr('href')).html().trim() === ''){
        $(elem).parent().hide(); // hide the 'li' tab-element
    } else {
        $(elem).parent().show(); // show the 'li' tab-element
    }
}); 
// if selected tab is now hidden, select the first visible tab
if (mytabs.children('ul').children('li').eq(selected).is(':hidden')){
    mytabs.children('ul').children('li').each(function(index, elem) {
        if ($(elem).is(':visible')){
            mytabs.tabs('select', index); // select this tab
            return false; // break
        }
    }); 
}

【讨论】：