Табы на jquery

Табы на jquery

tab

Задача сделать табы на jquery.

<script type="text/javascript">$(function () {
 $("div.tabcontent ul.tabNavigation li:last").css("border-right", "0").css("width", "87px");
 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.});

Алгоритм работы: Секциям (li) в блоке «.tabNavigation» присваивается класс при клике, который будет изменять цвет фона. Содержимое «.tabs-cont» будет плавно изменять свою прозрачность от hide до 1.0. Jquery находится в коде и не является навязчивым javascript кодом.

Давайте дружить!
Поставьте нравится 👍
Спасибо, я уже с вами!
Звоните нам
Вы подписались на нашу рассылку
Спасибо!
Мы обещаем, что не будем спамить, все только самое
нужное и полезное для вашего развития.
Спасибо!
Мы свяжемся с Вами в ближайшее время
ЛОВИТЕ БОНУС
Бесплатный аудит контекстной рекламы Google Adwords.
Прокачаем ваш контекст!