Блог

Главная - Вопросы по программированию - Как посчитать «видимые» вкладки в jquery?

Как посчитать «видимые» вкладки в jquery?

#jquery #jquery-ui #jquery-ui-tabs #jquery-tabs

#jquery #jquery-пользовательский интерфейс #jquery-ui-tabs #jquery-вкладки

Вопрос:

Я унаследовал этот код, и теперь мне нужно внести изменения. У меня есть серия вкладок: 

 <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.  
}

Чего мне не хватает? Я просмотрел все примеры и не могу найти решение. У меня есть идея, что это из-за скрытия / показа и неправильного выполнения видимого теста.

Заранее благодарю вас

Ответ №1:

ДЕМОНСТРАЦИЯ

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

Обновить

Если вы скрываете тег привязки (которым, похоже, вы являетесь), вам может потребоваться использовать 

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

Комментарии:

1. По какой-то причине это вернуло количество ВСЕХ вкладок, включая «скрытые». Это также не удовлетворяет вторую потребность в цикле, которая заключается в том, чтобы позволить мне определить следующую видимую вкладку, чтобы я мог переключиться на нее.

2. Определите следующую видимую вкладку? Вы также можете сделать это с помощью этого кода, хотя я не вижу ничего относящегося к этому в вашем исходном коде. Я вижу только, что вы сохраняете переменную counter и действуете в зависимости от ее total.

3. О, и что касается того, почему ваши элементы не учитываются должным образом, поместите id в <li> вместо <a> . Не имеет смысла скрывать внутреннюю ссылку, а не всю вкладку. Либо это, либо измените мой селектор на if ( $('#Tabs ul li a:visible').length > 1) ) { . Смотрите обновление

4. HTML был настроен таким образом, когда я его получил, так как для его изменения мне пришлось бы просмотреть весь сайт и надеяться, что я нашел их все. То, что я пытаюсь сделать, — это простой самонастраивающийся мод, который покажет / скроет кнопку. Другая — это функция, которую кнопка будет вызывать для перехода с одной вкладки на следующую. Я показал код кнопки только потому, что это была первая проблема, и выполнение цикла в этом случае дало бы мне код для выбора следующей вкладки. Логика функции будет выглядеть примерно так: for (i=»текущая вкладка»; …) { if (‘visible’) { ‘активировать вкладку’; return; } } ‘активировать вкладку 0’

5. Ваш ответ — это гораздо более чистый способ для меня сделать кнопку, и я буду использовать его для этого. У меня есть код для получения текущей выбранной вкладки и активации новой вкладки. Мне просто нужно, как перебирать вкладки и проверять каждую из них на видимость.

Ответ №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')) amp;amp; (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’ передается при вызове, так что эта функция может использоваться разными страницами; каждая из которых имеет разную коллекцию вкладок, а также разные имена.