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

30 января 2015 Антон Кулешов 5285 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
Читайте далее

Всплывающие подсказки balloon CSS

8 июня 2016 Антон Кулешов

Приветствую, друзья! Недавно работал над одним сайтом и в коде увидел очень интересную CSS библиотечку для добавления всплывающих подсказок. Решений на эту тему есть уже масса, и я неоднократно добавлял к себе на сайт разные варианты, но увидев balloon решил о нём написать.

Слайдер карусель

7 октября 2015 Антон Кулешов

Желание выделиться и огромная конкуренция вынуждает веб-мастеров делать сайты интересными и запоминающимися. Трудно представить, сколько времени, зачастую, тратится на то, чтобы придать странице особый шарм. И сегодня я хочу рассказать про jQuery плагин Cloud 9 Carousel – это скрипт, которой позволяет сделать 3D слайдер карусель.

Работа с API Яндекс Метрикой

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

Недавно один пользователь «ВКонтакте» задал мне вопрос: как получить Яндекс токен для работы с API Метрикой? Проблема, по своей сути, не вызывает сложностей, хотя на тот момент я не мог дать исчерпывающего ответа. На поиск решения у «неподготовленного» читателя может уйти весьма продолжительный промежуток времени. В этой статье я рассмотрю простой пример работы с API Яндекс Метрикой и подробно распишу все этапы.