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

这里是关于 jsfiddle 注释的示例

：

• 使用 offst 变量的原因是，如果删除选项卡，索引将会更改。
• 这会将 tabs 元素缓存在 $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' 条件，除非它确实是空的，即。