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

Пример

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

2 Комментария(ев) для “Как создать простые табы на jQuery с автосменой активного таба”



  1. goglopseg says:

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

  2. silver says:

    Тут в принципе тоже все довольно очевидно. Указываем селектор, и задаем обработчик события при нажатию на нашу вкладку, а точнее мы просто вызываем функцию switch_tabs и передаем параметр: объект самой ссылки по которой мы кликаем. Далее в функции мы сначала прячем все блоки с содержимым, потом удаляем класс selected, получаем атрибут rel из ссылки по которой мы кликнули, и показываем необходимый таб. Также мы вызываем функцию, передавая в нее ссылку с классом defaulttab, чтобы при загрузке документа у нас показалась первая вкладка.


Оставьте комментарий