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>

我的问题：

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

Answer 1

您必须先选择属于Tabs的{{1}}然后浏览所有面板，选择空的面板并禁用它们。

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

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

如何隐藏空标签

2 个答案: