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

Demo

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'在调用中传入，因此该函数可以被不同的页面使用;每个都有不同的标签集合，以及不同的名称。

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

2 个答案: