Заказать услугу
  • +38 099 227-70-70
  • +38 097 770-63-63

Табы на 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 кодом.

Посты этой рубрики посвящены инструментам и стратегиям интернет-маркетинга, призванным увеличить конверсию сайта. Статьи будут интересны и полезны нынешним и будущим владельцам онлайн-бизнеса.
Интересуют последние веяния в дизайне сайтов и айдентики? Хотите правильно сочетать цвета и шрифты? Тогда вам сюда.
В рубрике «Разбор заплывов» специалисты студии Webakula делятся не только своими опытом, наблюдениями, выводами, но и практическими советами.
Рубрика поможет разобраться с базовыми терминами интернет-маркетинга, веб-разработки и дизайна. Статьи пригодятся любознательным индивидуумам, которым не безразлична тема сайтостроения.
Мы рады познакомиться и поделиться информацией о насыщенных буднях и ярких выходных компании Webakula с нашими клиентами, читателями и случайными «прохожими». Заходите, располагайтесь, чувствуйте себя, как дома :)