Табы при помощи jQuery — все просто

Задача.

Сверстать табы. Расположение и цвета показаны на картинке:
jquery3
Нужно, чтобы секциям (li) в блоке «.tabNavigation» присваивался класс при клике, который будет изменять цвет фона. Содержимое «.tabs-cont» будет плавно изменять свою прозрачность от hide до 1.0. Плюс, все оформление изменяется в css, html и javascript код на это не должен влиять.

Решение.

Создаем универсальный каркас для наших табов:

Первая ссылка
Вторая ссылка
Третья ссылка
Четвертая ссылка

Содержимое в сылках вы можете менять по своему вкусу. Здесь html код может изменяться ; ).

JavaScript код:

$(function () {
var tabContainers = $('div.tabcontent div.tabs-cont div'); // Заменяем переменной все div находящиеся в .tabs-cont.
tabContainers.hide().filter(':first').show(); // При загрузке, эти div'ы прячем, кроме первого.

$('div.tabcontent ul.tabNavigation a').click(function () { // Действие происходит при клике на ссылку.
tabContainers.hide(); // Все div'ы прячем.
tabContainers.filter(this.hash).fadeIn("slow"); // Плавно проявляем блок с id'ом указанном в href ссылки.
$('div.tabcontent ul.tabNavigation a').removeClass('selected'); // Удаляем у всех ссылок класс selected.
$(this).addClass('selected'); // Добавляем класс selected ссылке, на которую кликнули.
return false;
}).filter(':first').click(); // При загрузке, автоматически присваеваем первой ссылке класс selected.
});

Если все понятно, то все супер =). Осталось показать пример того, что html и JavaScript не изменяются:

Я конечно же добавил лишнего JavaScript’a. Но это лишь для красоты. Чтобы смотрелось лучше.

Сегодня вы получили универсальный пример табов на jQuery. Оформлять можно только лишь при помощи css ничего другого вам не нужно.

[19.06.2010] UPD: По многочисленным просьбам обновил статью: Табы при помощи jQuery для вашего сайта.

Комментарии — 33 комментария

  1. #14037 Андрей в 16:30, 9 марта 2012:

    Ответить | Цитировать

    А подскажите пожалуйста, может кто сталкивался… почему-то в табах напрочь отказываются работать скроллы на jquery, (подразамеваю простую прокрутку контента). Если поместить над табами или после них, все просто отлично работает, но стоит засунуть в таб — скролбар есть, но не дает себя двигать… Пробовал 3 варианта табов, и 4 скроллов… одни и те же симптомы, в чем может быть конфликт?

  2. #24906 Марат в 21:01, 27 января 2014:

    Ответить | Цитировать

    Проблема возникнет ели вы захотите использовать несколько табов на странице
    Поэтому советую использовать .each function

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting