Як створити прості таби на 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 з автоматичною зміною активного таба.

Приклад

Сторінку з робочими табами можете переглянути тут.