Как создать простые табы на 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 с автоматической сменой активного таба.
Пример
Страницу с рабочими табами можете посмотреть тут.