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 したがって、セレクターを複数回呼び出す必要はありません。
• これは適切なものを使用します remove jQuery UIタブの関数。

Answer 2

このリンクでコードを見つけることができます。

http://jsfiddle.net/sjkye/

よろしく。

Answer 3

これを試して

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

指定されたタブ ID に対して、一致する href を持つアンカーの親要素 (およびその中のすべて) を削除する必要があります。

編集：ところで、3 番目の div は、実際に空でない限り、「:empty」条件と一致しません。