Табы для сайта на jQuery

← Назад в записки веб-программиста

Табы для сайта на jQuery

jsjqueryтабы

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

Вспоминаю свой опыт реализации табов на сайте. Для этого я в первую очередь полез искать готовые скрипты, библиотеки, пришлось знакомиться с инструкциями по запуску скрипта. На самом деле оказалось все намного проще.

Для работы табов нам пригодится всего 2 функции jquery: index() и eq(). Идея следующая: при клике на таб определяем его индекс, закрываем все контейнеры с информацией и открываем контейнер под тем же индексом, что и таб, на который кликнули. Важно, чтобы в html порядок табов и контейнеров соответствовал друг другу.

html:

	<div id="hellotabs">		<ul>			<li class="active">1 вкладка</li>			<li>2 вкладка</li>			<li>3 вкладка</li>		</ul>		<div class="hellotabs-content">			<div class="hellotabs-content-item active">				<p>Содержание 1ой вкладки</p>			</div>			<div class="hellotabs-content-item">				<p>Содержание 2ой вкладки</p>			</div>			<div class="hellotabs-content-item">				<p>Содержание 3ей вкладки</p>			</div>		</div>	</div>				

jquery:

	<script type="text/javascript">		$(document).ready(function(){ //как загрузился документ			$('#hellotabs ul li').click(function(){	//функция при клике на таб				$('.hellotabs-content > div').hide(); //закрываем все контейнеры с информацией				//открываем контейнер под тем же индексом, что и таб, на который нажали:				$('.hellotabs-content .hellotabs-content-item').eq($(this).index()).show(); 				//$('.hellotabs-content .hellotabs-content-item').eq($(this).index()).fadeIn(); //плавное появление				//$('.hellotabs-content .hellotabs-content-item').eq($(this).index()).slideDown(); //открывает как слайд				$('#hellotabs ul li').removeClass('active'); //отключаем активность всех табов				$(this).addClass('active'); //включаем активность нажатому табу			});		});	</script>				

Как видите, достаточно определить индекс нажатой кнопки и открыть контейнер под тем же индексом. Пример работы табов с готовым оформлением вы можете увидеть на демо:

ДемоСмотреть демо

И css для примера:

	<style type="text/css">		#hellotabs{			width: 980px;			margin: 0 auto;		}		#hellotabs ul{			margin: 0;			padding: 0;		} 		#hellotabs ul li{			display button: inline-block;			font-family: helvetica;			padding: 10px 50px;			border: 1px solid rgb(216, 216, 216);			margin: 0px;			-webkit-border-radius: 10px 10px 0 0;			-moz-border-radius: 10px 10px 0 0;			border-radius: 10px 10px 0 0;			border-bottom: none;			background: rgb(222,239,255);			background: -moz-linear-gradient(top, rgba(222,239,255,1) 0%, rgba(152,190,222,1) 100%);			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,239,255,1)), color-stop(100%,rgba(152,190,222,1)));			background: -webkit-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%);			background: -o-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%);			background: -ms-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%);			background: linear-gradient(to bottom, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%);			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=0 );			color: rgb(31, 29, 29);			text-shadow: 1px 1px 0px rgb(219, 219, 219);			cursor: pointer;		}		#hellotabs ul li:hover,#hellotabs ul li.active{			background: rgb(240,249,255); /* Old browsers */			background: -moz-linear-gradient(top, rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%); /* FF3.6+ */			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,249,255,1)), color-stop(47%,rgba(203,235,255,1)), color-stop(100%,rgba(161,219,255,1))); /* Chrome,Safari4+ */			background: -webkit-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Chrome10+,Safari5.1+ */			background: -o-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Opera 11.10+ */			background: -ms-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* IE10+ */			background: linear-gradient(to bottom, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C */			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */		}		#hellotabs .hellotabs-content{			border: 1px solid rgb(216, 216, 216);			padding: 10px 20px;		}		#hellotabs .hellotabs-content .hellotabs-content-item{			display button:none;		}		#hellotabs .hellotabs-content .hellotabs-content-item.active{			display button:block;		}