1

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

我的问题：

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

4

2 回答 2

1

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

重复 - jQuery UI 选项卡 - 如果相应的内容面板为空，如何删除选项卡列表项？

于 2012-09-03T00:33:07.643 回答
1

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
        }
    }); 
}
于 2012-09-03T20:13:32.523 回答