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

Question

我正在使用带有 cms 系统的基本 jQuery UI 选项卡设置，我想知道如果具有相应 ID 的内容面板为空，是否可以隐藏导航选项卡。

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    </div>
    <div id="tabs-3">

    </div>

JavaScript

$(function() {
    $( "#tabs" ).tabs();
});

帮助表示赞赏:)

Answer 1

如果要删除所有空标签，可以使用以下代码：

$(function() {
    var $tabs = $( "#tabs" );
    $tabs.tabs();
    var offst = 0;
    $('#tabs > div').each(function(index, elem) {
        if ($(elem).html().trim() === '') {
            $tabs.tabs( "remove" , index - offst);
            offst++;
        }
    });
});

Here's jsfiddle 上的一个例子

注意事项：

• offst 变量的原因是，如果您删除一个选项卡，索引将会改变。
• 这会将选项卡元素缓存在$tabs 中，因此不必多次调用选择器。
• 这使用了 jQuery UI 选项卡的正确 remove 函数。

Answer 2

试试这个

if ($('#tabs-3').is(':empty')) {
    var tabId = $(this).attr('id');
    $('a[href$="'+tabId+'"]').parent().remove();
}

对于给定的标签 ID，这应该删除具有匹配 href 的锚的父元素（以及其中的所有内容）。

编辑： 顺便说一句，你的第三个 div 不会匹配 ':empty' 条件，除非它真的是空的，即。