如何隐藏空标签

Question

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

我的问题：

作为标签内容的变化，我想动态地隐藏任何空标签。在上面的示例中，我想隐藏第三个选项卡“柑橘”，因为其相应的选项卡不包含任何内容。有谁知道如何做到这一点？

Answer 1

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

Answer 2

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

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