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>

私の質問：

タブのコンテンツが変更されると、空のタブを動的に非表示にしたいと考えています。上の例では、対応するタブ ペインにコンテンツが含まれていないため、3 番目のタブ「柑橘類」を非表示にします。誰もこれを行う方法を知っていますか?

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 に答える