Как создать простые табы на jQuery с автосменой активного таба

Задача

Задача состоит в создании простых табов (вкладок) на основе популярной javascript библиотеки jQuery. При этом, активный таб должен поочередно меняться с каким-либо интервалом.

Решение

Для решения данной задачи нам, для начала, необходимо создать следующую структуру:

<div id="tabs">
    <ul class="tabs-navigation">
        <li><a href="#tab-1">Таб 1</a></li>
        <li><a href="#tab-2">Таб 2</a></li>
        <li><a href="#tab-3">Таб 3</a></li>
        <li><a href="#tab-4">Таб 4</a></li>
    </ul>
    <div class="tabs-container">
        <div id="tab-1">
            Контент первого таба
        </div>
        <div id="tab-2">
            Контент второго таба
        </div>
        <div id="tab-3">
            Контент третьего таба
        </div>
        <div id="tab-4">
            Контент четвертого таба
        </div>
    </div>
</div>

Класс .tabs-navigation служит контейнером для заголовков табов. А класс .tabs-container (как видно из названия) будет контейнером для содержания самих табов. Как вы уже успели заметить есть соответствие между значениями атрибутов href тегов <а> в .tabs-navigation и значениям атрибутов id блоков с контеном для табов в контейнере .tabs-container. Именно это и связывает заголовок таба с его содержимым.

Теперь попробуем немного стилизовать данную структуру.

.tabs-container{
    padding: 20px;
    border: 1px solid #448abb
    }
.tabs-navigation{
    margin: 0;
    height: 20px;
    }
.tabs-navigation li{
    float: left;
    list-style: none;
    }
.tabs-navigation li a{
    display: block;
    margin: 0 1px;
    padding: 0 15px;
    height: 20px;
    color: #448abb;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    border: 1px solid #448abb
    }
.tabs-navigation li.selected a, .tabs-navigation li:hover a{
    color: #fff;
    background: #448abb
    }

Следует отметить, что стили в данном случае не играют большую роль и вы можете экспериментировать с ними как угодно.

А теперь, самое главное, код который приведет табы в рабочее состояние.

$(document).ready(function(){
 
    var tabContainers = $('.tabs-container > div');
    tabContainers.hide().filter(':first').show();
 
    $('ul.tabs-navigation li a').click(function(){
        tabContainers.hide();
        tabContainers.filter(this.hash).show();
        $('ul.tabs-navigation a').parent('li').removeClass('selected');
        $(this).parent('li').addClass('selected');
        return false;
        }).filter(':first').click();
     
    });

Тут, сначала мы прячем все контейнеры для табов кроме первого. Затем прикрепляем событие мыши click на заголовки табов, в функции для этого события мы сначала прячем все табы (строка 7), показываем только таб связанный с текущим заголовком (строка 8), ставим класс selected со старого на заголовок текущего активного таба (строки 9-10).

Не забудьте, также, включить и саму библиотеку jQuery. Это можно сделать следующим образом:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Для того, чтобы активный таб менялся автоматически через какой-нибудь интервал, нам следует немного дополнить наш код.

$(document).ready(function(){
 
    var tabContainers = $('.tabs-container > div');
    tabContainers.hide().filter(':first').show();
 
    $('ul.tabs-navigation li a').click(function(){
        tabContainers.hide();
        tabContainers.filter(this.hash).show();
        $('ul.tabs-navigation a').parent('li').removeClass('selected');
        $(this).parent('li').addClass('selected');
        return false;
        }).filter(':first').click();
     
     
    function pressNextTab(){
        if ($('ul.tabs-navigation li.selected').hasClass('last')){
            $('ul.tabs-navigation li:first').find('a').trigger('click');
            }else{
                $('ul.tabs-navigation li.selected').next('li').find('a').trigger('click');
                }
        }
    $('ul.tabs-navigation li:last').addClass('last');
    var int = setInterval(pressNextTab, 5000);
    });

В строке 22 мы сначала отмечаем последний таб, добавив к его контейнеру класс .last. Затем устанавливаем бесконечное интервальное выполнение функции pressNextTab через каждые 5 секунд (строка 23). В этой функции мы проверяем не является ли текущий таб последним (для этого мы и добавили к нему класс .last) и в зависимости от этого активизируем событие click на первом или следующем по отношении к текущему табу.

Вот так, достаточно просто мы сделали табы на jQuery с автоматической сменой активного таба.

Пример

Страницу с рабочими табами можете посмотреть тут.