Показать Меню
falbar Вкладки-табы на jQuery

Как сделать вкладки-табы для сайта на jQuery

Вкладки-табы на jQuery

Всем привет! В сегодняшней статье давайте рассмотрим, как сделать простой вариант вкладок для сайта на jQuery. Данная реализация подойдет там, где необходимо установить простенькие табы, на дополнительных эффектах визуализации останавливаться не будем.

Начинаем, как всегда, со структуры HTML: кладем заготовку будущих табов в блок-обертку с id=wr-tabs, далее в ней добавляем блок tabs – в нём будут находиться наши вкладки, и блок content – сюда кладем блоки с выводимым контентом.

<div id="wr-tabs">
	<div class="tabs">
		<div class="tab active">Вкладка №1</div>
		<div class="tab">Вкладка №2</div>
		<div class="tab">Вкладка №3</div>
		<div class="tab">Вкладка №4</div>
	</div>
	<div class="content">
		<div class="tab-cont active">
			Контент №1
		</div>
		<div class="tab-cont">
			Контент №2
		</div>
		<div class="tab-cont">
			Контент №3
		</div>
		<div class="tab-cont">
			Контент №4 
		</div>
	</div>
</div>

Переходим к CSS стилям наших вкладок.

Тут главное указать для активного блока с контентом свойство display: block; , а для активной вкладки - такой же стиль, как и при наведении.

#wr-tabs{
	width: 700px;
	margin: 40px auto 0;
}
	#wr-tabs .tabs{
		background-color: #fff;
		margin-bottom: 3px;
	}
	#wr-tabs .tabs:after{
		content: '';
		display: block;
		clear: both;
		height: 0;
	}
		#wr-tabs .tabs .tab{
			float: left;
			cursor: pointer;
			border-right: 1px solid #f2f4f9;
			padding: 10px 20px;
		}
		#wr-tabs .tabs .tab:last-child{
			border-right: none;
		}
		#wr-tabs .tabs .tab:hover,
		#wr-tabs .tabs .tab.active{
			background-color: #c7e7f9;
			color: #1d7ee4;
		}
	#wr-tabs .content{
		background-color: #fff;
	}
		#wr-tabs .content .tab-cont{
			display: none;
			padding: 15px 10px;
		}
		#wr-tabs .content .tab-cont.active{
			display: block;
		}

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

$(function(){

	$("#wr-tabs").on("click", ".tab", function(){

		var tabs = $("#wr-tabs .tab"),
			cont = $("#wr-tabs .tab-cont");

		// Удаляем классы active
		tabs.removeClass("active");
		cont.removeClass("active");
		// Добавляем классы active
		$(this).addClass("active");
		cont.eq($(this).index()).addClass("active");

		return false;
	});
});

Принцип работы скрипта заключается в отслеживании клика по вкладке (div с классом tab). При совершении данного события в переменные tabs и cont будут сохраняться выборки всех блоков вкладок и всех блоков с контентом. После чего у всех элементов удаляется класс active (сделано это для удобства, чтобы не отслеживать наличие данного класса у элементов по отдельности) и добавляется той вкладке, по которой кликнули. Вместе с ней дописывается класс active соответствующему ей блоку с контентом.

Готово!

Подписаться на обновления

belialov
belialov 27 декабря 2015 в 20:53
Отличные вкладки! спасибо
но подскажите кто нибудь, как сделать чтоб каждая вкладка не моросила между собой, у меня в вкладках фреймы, и некоторые не работает если нажать нажимать на вкладки
к ним можно тег там прикрутить типо tab1 tab2 tab3 ??
Ответить
Антон Кулешов
Антон Кулешов > belialov 27 декабря 2015 в 21:54
Здравствуйте, в этой статье я рассмотрел простую реализацию вкладок и её спокойно можно расширить в любом направлении. Если я правильно понял tab1 tab2 tab3 – это id которые Вам нужны для определения вкладок. Их можно без проблем добавлять. Не совсем понятно выражение «вкладка не моросила между собой» поясните его, прислав Ваш пример мне на почту, которая есть на странице контакты и я постараюсь помочь.
Ответить