Универсальный jQuery-скрипт для блоков с вкладками (табами)
Вступление Мое знакомство с фреймворком jQuery произошло в 2008-м году, после того, как, однажды, на одном из англоязычных сайтов я нашел jQuery-скрипт, который позволяет создавать блоки с удобными вкладками. Этому скрипту я посвятил отдельный пост на данном блоге. С тех пор прошло 2 года, ...
Комментарии (978)
Здравствуйте,
у меня вопрос. Хочу учесть тот вариант, когда у пользователя отключен JavaScript. В данном примере пользователь не увидит информацию, расположенную на других вкладках. Как сделать, чтобы при отключенном JS информация всеравно выдавалась?
Вот пример:
при отключенном JS информация видна пользователю…
http://podgolovnik.ru/catalog/monitory-v-podgolovnik/avis/podgolovnik-so-vstroennym-dvd-pleerom-i-lcd-monitorom-85
Тогда сделайте следующее:
1. из стилей для блока
.box { ... }
удалите свойствоdisplay: none;
.2. в js-файл после этого кода:
добавьте следующую строку:
Пытаюсь в одну вкладку поставить еще набор вкладок и ничего не выходит, меняю классы и прописываю 2 скрипта, но работают только те вкладки чей скрипт указан первый, можно ли вообще делать вложенность?
Для вложенности, скорее всего, скрипт нужно переделывать. Я не проверял.
Прикольно, мне очень понравился пример, доступно и понятно.
Здравствуйте, очень понравился ваш скриптик, я его чуток покрутил, и сделал вложенность – в горизонтальных вкладках вертикальные. Если нужно, то могу выслать :)
А в ucoz этот скрипт работает? Если да, то как можно это осуществить. Помогите пожалуйста. Зарнее благодарен.
Если вкладок много, то они в несколько строк встраиваются, не думали как лучше это реализовать?
Дизайн нужно таким образом рассчитывать, чтобы они влазили.
Это не изобртениие, а тупое копирование с присваиванием. Типа (у меня получилось):)))
Копирование чего?
Здравствуй, Dimox! Огромное спасибо за скрипт, но есть одна непонятная проблема!!!
Вытащил тот пример с cookie чтоб запоминались вкладки, проверил все работает, во всех браузерах(даже в таком калеке как IE:) ), кроме Chrome, на твоей демке он нормально запоминает, а скачал на комп и он сбрасывает на первую все равно! Зато в остальных все запоминает!
Подскажи в чем может быть причина?
Не знаю, к сожалению.
не знаю почему, но когда положил на Denwer все стало работать нормально! ) только хоть убей не знаю почему!
Всё просто, хром не принимает куки с локалхоста. А вот денвер, это уже какбэ веб сервер :)
Спасибо еще раз огромное! Но вот никак не получается сделать так чтобы в первой вкладке у меня было в контенте еще 3 вкладки, не подскажете как это сделать?
Спс большое, искал. Нашел тут :)
Все работает отлично, спасибо за скрипт :)
А как сделать, чтобы вкладки были отдельно от самого содержимого этих вкладок? (Как разнести их по разным DIV’ам)
Например, вкладки в хедере, а содержимое при их переключении меняется в левом столбце…
Заранее спасибо!
Очень просто. Вот, сделал пример – http://narod.ru/disk/17690083001/tabs.zip.html
Добрый день, можно перевыложить пример , чтобы вкладки были отдельно от самого содержимого этих вкладок, а то народ пишет что файл удален.
здравствуйте, не могли бы перезалить пример с отдельными друг от друга дивами?
Спасибо, сам допетрил вчера, что нужно просто родителя поменять. Хотя написал чуть по-другому:
$('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 переместил в нужное место!
Спасибо большое, скрипт обалденный, использую в нескольких проектах уже.
П.С. Наберусь тогда наглости, спрошу еще как сделать “липкий” блок (такой, как у вас с социальными закладками). Может статья есть почитать или еще какие-нибудь наработки. В свое время встречал вроде у Евгения Попова описание, но что-то найти не могу… Спасибо
Да, есть статья – https://dimox.name/socializ-floating-panel/
Спасибо огроменное – действительно, самое простое и понятное объяснение!
Внимательно читала все комментарии, а ответа на проблему перескакивания страницы наверх так и не нашла.
При этом на страница данного сайта не “прыгает” при переключении ;)
Это потому, что у меня под блоками с вкладками много контента. А “прыгает” в том случае, когда на странице мало контента.
Код jQuery-крипта для переключаемых блоков с вкладка ПРОПУЩЕНА БУКВА.
Спасибо, исправил.
Все отлично работает, большое спасибо!
Подскажите как сделать плавное появление контента в табе, что бы контент появлялся плавно сверху вниз.
Замените строку:
на такую:
Спасибо, почти то что нужно, правда пользователи немного подтупливают когда блок сдвигается то вниз то вверх, лучше что бы он сдвигался только вниз)
Отлично, то, что искал. не люблю плагины, лучше ручками;)
Щас сделаю отпишусь
Просто супер, давно хотел реализовать такие вкладки. А в JQuery UI они реализованы слишком громоздко, здесь вариант Димокса намного лучше.
Не могу никак нарадоваться этому блогу, столько полезной информации!
Однако при переключении вкладок страница “отскакивает” наверх даже в Вашем примере. Сие не есть гуд.
Искал вкладки на ajax. Почитал. Прошёл мимо. Придётся самому писать.