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

Останнє в нашому блозі

Інтернет маркетинг
04.11.2019