如何隱藏空標籤

Question

我使用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> 

我的問題：

作爲標籤內容的變化，我想動態地隱藏任何空標籤。在上面的示例中，我想隱藏第三個選項卡「柑橘」，因爲其相應的選項卡不包含任何內容。有誰知道如何做到這一點？

Answer 1

This辦法，由內特建議，並沒有完全滿足我的需求，我結束了實施以下解決方案。下面的代碼會在用戶執行更改某些選項卡內容的操作時觸發。該代碼檢查是否有任何選項卡現在爲空，如果是，則隱藏空白選項卡。此外，它會檢查選定的選項卡是否已隱藏，如果是，則將選定選項卡更改爲第一個可見選項卡。

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

Answer 2

您必須先選擇屬於mytabs的Tabs然後遍歷所有面板，選擇那些空的並禁用它們。

複製 - jQuery UI Tabs - How can I remove tab list item if corresponding content panel is empty?