Табы на jquery

30.05.2011
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 кодом.

Последнее в нашем блоге