如何计算“可见” jquery 中的选项卡？

Question

我继承了这段代码，现在需要进行修改。我有一系列选项卡：

<div id="Tabs">
    <ul>
        <li><a href="#divGen" id="lnkGeneral">General</a></li>
        <li><a href="#divA" id="lnkA">A</a></li>
        <li><a href="#divB" id="lnkB">B</a></li>
        <li><a href="#divC" id="lnkC">C</a></li>
    </ul>
</div>

这些选项卡根据从下拉列表中选择的值使用 jquery 隐藏/显示：

$("#divA").hide(); $("#divB").show(); $("#divC").hide();  
$("#lnkA").hide(); $("#lnkB").show(); $("#lnkC").hide();

第一个选项卡 (divGen) 始终显示。我需要一种方法来循环浏览选项卡列表以确定哪些选项卡可能可见，因为我正在添加一个按钮以转到下一个选项卡。因为选项卡是动态可见的，所以我需要确定是否应显示按钮以及按下时“旋转”到哪个选项卡。我尝试了以下方法，但没有成功：

var $tabs = $('#Tabs').tabs();  
var i, count = 0;  
for (i = 0; i < $tabs.tabs('length'); i++) {  
    if ($tabs.tabs(i).is('visible')) {  
        count++;  
    }  
}  

if (count > 1)) {  
    Display the button.  
}

我错过了什么？我已经查看了所有示例，但找不到解决方案。我有一个想法，这是由于隐藏/显示而没有正确执行可见测试。

先感谢您

Answer 1

演示

if ( $('#Tabs ul li:visible').length > 1) ) {  
    //Display the button.  
}

更新

如果您隐藏了锚标记（看起来您是）你可能需要使用

if ( $('#Tabs ul li a:visible').length > 1) ) {  
    //Display the button.  
}

Answer 2

对于按钮显示/隐藏：

// if more than one tab is visible display the button  
if ($('#Tabs ul li a:visible').length > 1)) {  
       //Display the button.  
} else {  
       //Display the button.  
}

按钮调用的函数是：

function fnNextTab(div) {  
    var $tabs = $(div).tabs();
    var selected = $tabs.tabs('option', 'selected');
    var max = $tabs.tabs('length') - 1; // Zero based

    $(div + ' ul li a').each(function(i) {
        // if the tab is visible and 'after' the current tab select it
        if (($(this).is(':visible')) && (i > selected)) {
            $tabs.tabs("select", i);    // This selects the tab
            $tabs.tabs('load', i);      // This displays the tab
            return false;               // Done searching
        }

        if (i >= max) {
            // Goto the General (first) tab
            $tabs.tabs("select", 0);    // This selects the tab
            $tabs.tabs('load', 0);      // This displays the tab
        }
    });
}

调用时传入'div'，这样不同的页面就可以使用这个函数；每个都有不同的选项卡集合，并且具有不同的名称。