Як створити прості таби на 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 з автоматичною зміною активного таба.
Приклад
Сторінку з робочими табами можете переглянути тут.
Довольно интересно конечно. Я немогу подписаться под каждым вашим словом, но в общем соглашусь.
Тут в принципе тоже все довольно очевидно. Указываем селектор, и задаем обработчик события при нажатию на нашу вкладку, а точнее мы просто вызываем функцию switch_tabs и передаем параметр: объект самой ссылки по которой мы кликаем. Далее в функции мы сначала прячем все блоки с содержимым, потом удаляем класс selected, получаем атрибут rel из ссылки по которой мы кликнули, и показываем необходимый таб. Также мы вызываем функцию, передавая в нее ссылку с классом defaulttab, чтобы при загрузке документа у нас показалась первая вкладка.