Универсальный jQuery-скрипт для блоков с вкладками (табами)

Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...

Комментарии (970)

  1. Здравствуйте,
    у меня вопрос. Хочу учесть тот вариант, когда у пользователя отключен JavaScript. В данном примере пользователь не увидит информацию, расположенную на других вкладках. Как сделать, чтобы при отключенном JS информация всеравно выдавалась?
    Вот пример:
    при отключенном JS информация видна пользователю…
    http://podgolovnik.ru/catalog/monitory-v-podgolovnik/avis/podgolovnik-so-vstroennym-dvd-pleerom-i-lcd-monitorom-85

  2. Пытаюсь в одну вкладку поставить еще набор вкладок и ничего не выходит, меняю классы и прописываю 2 скрипта, но работают только те вкладки чей скрипт указан первый, можно ли вообще делать вложенность?

  3. Прикольно, мне очень понравился пример, доступно и понятно.

  4. Здравствуйте, очень понравился ваш скриптик, я его чуток покрутил, и сделал вложенность — в горизонтальных вкладках вертикальные. Если нужно, то могу выслать :)

  5. А в ucoz этот скрипт работает? Если да, то как можно это осуществить. Помогите пожалуйста. Зарнее благодарен.

  6. Если вкладок много, то они в несколько строк встраиваются, не думали как лучше это реализовать?

  7. Это не изобртениие, а тупое копирование с присваиванием. Типа (у меня получилось):)))

  8. Здравствуй, Dimox! Огромное спасибо за скрипт, но есть одна непонятная проблема!!!
    Вытащил тот пример с cookie чтоб запоминались вкладки, проверил все работает, во всех браузерах(даже в таком калеке как IE:) ), кроме Chrome, на твоей демке он нормально запоминает, а скачал на комп и он сбрасывает на первую все равно! Зато в остальных все запоминает!
    Подскажи в чем может быть причина?

  9. Спасибо еще раз огромное! Но вот никак не получается сделать так чтобы в первой вкладке у меня было в контенте еще 3 вкладки, не подскажете как это сделать?

  10. Спс большое, искал. Нашел тут :)

  11. Все работает отлично, спасибо за скрипт :)

  12. А как сделать, чтобы вкладки были отдельно от самого содержимого этих вкладок? (Как разнести их по разным DIV’ам)

    Например, вкладки в хедере, а содержимое при их переключении меняется в левом столбце…

    Заранее спасибо!

  13. Спасибо, сам допетрил вчера, что нужно просто родителя поменять. Хотя написал чуть по-другому:


    $('ul.tabs').delegate('li:not(.current)', 'click', function() {
    $(this).addClass('current').siblings().removeClass('current');
    $("div.section").find('div.box').hide().eq($(this).index()).fadeIn(150);
    })

    …табы вынес из div.section, а собственно сам div.section переместил в нужное место!

    Спасибо большое, скрипт обалденный, использую в нескольких проектах уже.

    П.С. Наберусь тогда наглости, спрошу еще как сделать «липкий» блок (такой, как у вас с социальными закладками). Может статья есть почитать или еще какие-нибудь наработки. В свое время встречал вроде у Евгения Попова описание, но что-то найти не могу… Спасибо

  14. Спасибо огроменное — действительно, самое простое и понятное объяснение!
    Внимательно читала все комментарии, а ответа на проблему перескакивания страницы наверх так и не нашла.
    При этом на страница данного сайта не «прыгает» при переключении ;)

  15. Код jQuery-крипта для переключаемых блоков с вкладка ПРОПУЩЕНА БУКВА.

  16. Все отлично работает, большое спасибо!
    Подскажите как сделать плавное появление контента в табе, что бы контент появлялся плавно сверху вниз.

  17. Отлично, то, что искал. не люблю плагины, лучше ручками;)
    Щас сделаю отпишусь

  18. Просто супер, давно хотел реализовать такие вкладки. А в JQuery UI они реализованы слишком громоздко, здесь вариант Димокса намного лучше.
    Не могу никак нарадоваться этому блогу, столько полезной информации!

  19. Однако при переключении вкладок страница «отскакивает» наверх даже в Вашем примере. Сие не есть гуд.

  20. Искал вкладки на ajax. Почитал. Прошёл мимо. Придётся самому писать.

Ваш комментарий