Jquery ui 如何隐藏空选项卡

我使用的是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>

青苹果，红苹果
蓝莓，覆盆子

我的问题:

---

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

您必须首先选择属于

mytabs

的

选项卡

，然后检查所有面板，选择空的并禁用它们

Nate建议的重复-

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

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

---

我查看了jquery_ui tabs文档（），并搜索了stackoverflow和google，但没有找到任何解决我问题的方法。我更仔细地查看了这一点，现在我发现这与我想要的不完全一样。我希望隐藏（而不是删除）不需要的选项卡，并且我希望在选项卡内容更改时动态地这样做。我最终实现了下面的解决方案。