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

30 января 2015 Антон Кулешов 5264 2

В сегодняшней статье давайте рассмотрим, как сделать простой вариант вкладок для сайта на 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
Отличные вкладки! Спасибо, но подскажите кто нибудь, как сделать чтоб каждая вкладка не моросила между собой, у меня в вкладках фреймы, и некоторые не работает если нажать нажимать на вкладки
к ним можно тег там прикрутить типо tab1 tab2 tab3 ??
Антон Кулешов
Антон Кулешов 27 декабря 2015
Здравствуйте, в этой статье я рассмотрел простую реализацию вкладок и её спокойно можно расширить в любом направлении. Если я правильно понял tab1 tab2 tab3 – это id которые вам нужны для определения вкладок. Их можно без проблем добавлять. Не совсем понятно выражение «вкладка не моросила между собой» поясните его, прислав ваш пример мне на почту, которая есть на странице контакты и я постараюсь помочь.
no_avatar
Читайте далее

Гистограммы и не только

8 сентября 2015 Антон Кулешов

Порой на ресурсе приходится отобразить какие-либо статистические данные: будь то сводная диаграмма из нескольких метрик, статистика для геймеров, биржевая сводка и многое другое. Ранее все решалось до боли просто: мы строили нужный график в таблицах excel, а затем, в виде картинки, помещали его у себя на сайте, но что делать, если необходимо подкорректировать данные или они обновляются, скажем, каждые 10 минут? Искать раба? Ну, уж нет, для построения графиков прямо на сайте есть более эффективные методы, и сегодня мы рассмотрим библиотеку morris.

Делаем подгрузку контента при прокрутке страницы

16 ноября 2014 Антон Кулешов

В настоящее время на многих сайтах можно увидеть динамически подгружаемый контент при прокрутке страницы. Этот эффект стал одной из хороших альтернатив обычной постраничной навигации. Хотя и у него есть свои недостатки, но удобство этого способа их компенсирует. Из этой статьи вы узнаете, как реализовать такой функционал у себя в проекте используя jQuery плагин jScroll.

Эффект лупы при помощи jQuery плагина

25 сентября 2014 Антон Кулешов

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