Внимание! Нижеизложенная статья на данный момент не актуальна. Вместо нее читайте статью "Универсальный jQuery-скрипт для блоков с вкладками (табами)". * * * Примерно последние месяц-два на англоязычных блогах мне стали попадаться на глаза блоки в сайдбаре, переключаемые с помощью вкладок-табуляторов, которые, судя по всему, становятся ...
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе. Вариант на JavaScript Можно посмотреть готовый ...
Содержание: Вступление Код jQuery-скрипта для переключаемых блоков с вкладками Добавлено 07.03.2010 (обновлено 09.04.2015) Скачать Универсальный jQuery-скрипт для блоков с вкладками HTML-код, который нужно использовать для скрипта Обязательные CSS-стили для вышеуказанного HTML-кода Примеры ...
Данный скрипт — это усовершенствованная версия JS-скрипта «Добавить в закладки», который я представил читателям более года назад. Прежде всего хочу поблагодарить Женю Самборского за то, что помог мне его «добить». Скрипт уже давно ...
Сегодня предлагаю вам второй вариант моего скрипта для предпросмотра комментария. Смотрим готовый пример. Скрипт находится в исходном коде данного примера. Прошу обратить внимание, что для полноценной настройки скрипта под ваш сайт, ...
Комментарии (50)
Давно ждал именно этой статьи, даже просил как-то ее написать — огромное спасибо!!!
Буду думать, как лучше к себе в блог такое припаять ;)
Спасибо за статью, очень полезно, ведь иногда для оптимального юзабилити приходится увеличивать свободное пространство на странице.
dimox.name/examples/accessible-tabs-with-jquery.html — 404…
Feelov, да, я это помню :) На здоровье.
Gojas, думал же я, что что-то забыл :) Спасибо за подсказку.
> Поскольку у тега ссылок во вкладках не используется параметр href…
А почему бы, собственно, и не использовать параметр href? Достаточно чтобы onclick возвращал false, и не будет никакого прокручивания. А a без href, насколько я понимаю, вообще невалидно.
А a без href, насколько я понимаю, вообще невалидно.
это да)
попариться пришлесь со скриптом)
спасибо, нужная вещь
И что хорошо, малополезное для читателя, но жутко полезное для перелинковки облако тегов успешно прячется на второстепенной вкладке :)
Давид Мзареулян, Техник, почему вы решили, что не проходит валидацию? Только что проверил — успешно проходит. Так что все легально :)
А href не используется, видимо, потому, что нет события onclick. Если вы знаете и подскажете, как его прикрутить, буду рад.
У меня неправильно отображаются вкладки :(Они накладываются одна на другую.
Я так понимаю так не должно быть?
Браузер Опера.
Посмотреть можна здесь trouble
Да, вся навигация onegadget.ru из этих вклаок сделана =))
XAMelleOH, не должно. Наверное, это кеш.
Дима, а как поисковый робот относится к этим вкладкам, известно?
Ильшат, вообще-то, как мы знаем, поисковики не одобряют скрытый текст, принимая его за поисковый спам. Но подобные закладки, согласись, повышают юзабилити сайта, а посему глупо будет принимать это за спам.
Судя по тому, что в буржуйнете данную технологию использует множество сайтов, никакие санкции со стороны поисковиков не применяются.
docs.jquery.com/UI/Tabs
Хм… скачал архив, winrar и tc жалуются, что архив поврежден.
Попробуй снова скачать. С архивом все в порядке.
Попробовал, огонь :]
У меня почему-то при входе на страницу содержимое сразу двух вкладок вылезает. а потом когда нажмешь на одну из вкладок — всё нормально, и вскрываются они попеременно.
Значит либо не написан стиль из 3-го пункта, либо что-то неправильно изменили в скрипте.
Help! Подскажите как сделать чтобы вкладка оставалась активно даже после обновления страницы как сделано на http://new.skoda-auto.com/COM/innovation/design/Pages/skodadesign2.aspx либо на http://www.skoda-avto.ru/pub.html?docid=3319. Буду очень благодарен
Dimox,
$j ('ul.tabs.tabs1 li').click (function (event){
var thisClass = this.className.slice (0,2);
$j ('div.t1').hide ();
$j ('div.t2').hide ();
$j ('div.' + thisClass).show ();
$j ('ul.tabs.tabs1 li').removeClass ('tab-current');
$j (this).addClass ('tab-current');
event. preventDeafult ();
});
});
А в href писать что-либо.)