2

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

助けていただければ幸いです:)

4

2 に答える 2

4

空のタブをすべて削除する場合は、次のコードを使用できます。

$(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ため、セレクターを複数回呼び出す必要はありません。
  • これは、removejQuery UI タブの適切な機能を使用します。
于 2011-03-21T21:38:58.670 に答える
0

これを試して

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

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

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

于 2011-03-21T21:22:59.507 に答える