Комментарии на: Вкладки с использованием jQuery

От: Mindsaver

Mindsaver — Wed, 18 May 2011 20:53:34 +0000

Красиво получается. Только один минус что если первая вкладка пустая, то ничего не работает

От: naualt

naualt — Sun, 26 Apr 2009 19:08:50 +0000

Столкнулся с проблемой двойной вложенности вкладок, тоесть чтобы в див с содержимым вложить такую же по сути конструкцию из оглавления и содержимого…

От: Легион

Легион — Tue, 14 Apr 2009 11:27:50 +0000

Таб довольно интересный, но все-таки не то, чего хотелось бы. Сейчас во многих шаблонах к WordPress идут другие табы, причем, они намного интересней. Вырвать его из шаблона не удалось, почему-то расположение становится абсолютно другим. Будет статья по построению таких табов и не для wordpress, а с поддержкой любых шаблонов html? Вот эта информация была бы интересней, хотя и данный таб достаточно интересен.

От: maxim317

maxim317 — Mon, 09 Feb 2009 13:53:14 +0000

решил проблему)
правда очень алдово. просто скопировал несколько раз js и изменял в нем выбираемый class div, и в html тоже изменил.

От: maxim317

maxim317 — Sat, 07 Feb 2009 00:16:48 +0000

Спасибо! Вклодочки действительно хорошо работают)
Но вот незадача. Причем она косается всех реализаций табов, которые я видел. Что делать, если на странице несколько раз изпользуются вкладки (в моем случае 3 раза, потом будет больше).
Проблемма такова: tab с id first, показывается первым только в первом случае, а с остальными табами не работает вообще, пока не кликнешь по нему. Вот наприме: http://irteam.ru/index/0-31
Не подскажите, как решить эту проблемку?

От: Лилу

Лилу — Mon, 26 Jan 2009 13:59:14 +0000

Вот мучаюсь, не могу понять в чем дело. В опере вообще это не работает…. А почему?

От: Игорь

Игорь — Thu, 18 Dec 2008 11:40:21 +0000

Спасибо большое, помогло)))

От: admin

admin — Wed, 17 Dec 2008 10:25:02 +0000

Игорь, почему нельзя? Можно. Только надо немного знать jQuery:

$(function () {

    // Получаем все div-элементы, которые являются детьми 

    var tabContainers = $('div.tabs > div');

    // Получаем ссылки, которые расположены внутри ;

    //  расположен внутри 

    var tabNavigation = $('div.tabs ul.tabNavigation a');

    // Скрываем все элементы tabContainers и делаем видимым второй

    tabContainers.hide().eq(1).show();

    // Делаем активной вторую вкладку (добавляем второму элементу  class="selected")

    tabNavigation.eq(1).addClass('selected'); 

    // Назначаем обработчик события для всех ссылок tabNavigation

    tabNavigation.click(function () {

        // Видимым будет div-элемент, id которого совпадает с якорем

        // соответствующей ссылки

        tabContainers.hide().filter(this.hash).show();  

        // Для всех ссылок удаляем class="selected" (хотя на самом

        // деле class="selected" имеет всего одна ссылка)      

        tabNavigation.removeClass('selected');

        // Для ссылки, по которой кликнули, добавляем class="selected"

        $(this).addClass('selected');    

        return false;

    });

});

От: Игорь

Игорь — Wed, 17 Dec 2008 08:07:56 +0000

То есть вы хотите сказать, что при такой реализации табов сделать открытой любую другую владку нельзя?:(

От: admin

admin — Mon, 15 Dec 2008 09:12:01 +0000

Игорь, я так понял, что нужно сделать стартовой вторую вкладку? Если да, то боюсь вы не поняли смысл конструкции

var tabContainers = $('div.tabs > div');

tabContainers.hide().filter(':first').show();

Первая строка - мы отбираем всех детей div-элементов имеющих class=”tabs”. Вторая строка - применяем фильтр filter(’:first’), чтобы из всех детей отобрать только первых. В CSS существует такое понятие как псевдоэлементы. jQuery существенно расширяет способы обращения к элементам страницы. Но если есть такая конструкция как filter(’:first’), то это не значит, что есть конструкция filter(’:second’) или filter(’:third’). То, что один из наших контейнеров имеет id=”first” не имеет отношение к :first.
jQuery – Javascript нового поколения
jQuery API: Traversing - обход DOM