Создание вкладок (табов) на JavaScript

JavaScript  /  14 комментариев

В этом уроке я покажу вам шаг за шагом, как создать вкладки, используя чистый, vanilla JavaScript. Если вдруг у вас возникнут трудности с объяснением в этом уроке, то вы также сможете найти ниже видеоинструкцию. Я покажу довольно интересную версию вкладок, которая позволит создавать любое количество вкладок на странице и секций с ними, и между ними даже не будет привязки по ID или по data-атрибуту.

Вот так они будут выглядеть:

Создаём вкладки табы на чистом JavaScript

Больше практических примеров, написанных на чистом JavaScript мы можете найти в моём видеокурсе, очень рекомендую.

Кстати, скачать готовый код вы можете по ссылке.

В отношении непосредственно HTML структура вкладок выглядит примерно следующим образом:

<ul class="container--tabs">
	<li class="tab tabs--active">Первая</li>
	<li class="tab">Вторая</li>
</ul>
 
<div class="container--content">
	<div class="content content--active"> 
		<!-- содержимое первой вкладки -->
	</div> 
	<div class="content">
		<!-- содержимое второй вкладки -->
	</div>
</div>
  • Наша задача придумать какой-то CSS-класс как для самих вкладок, так и для блоков с их содержанием, например сами вкладки у нас имеют класс .tab, а блоки с содержанием класс .content
  • После чего мы также скрываем в CSS все блоки .content и отображаем только активный, то есть имеющий класс .content--active. Что касается класса .tab--active, то он только стилизует немного по-другому выбранную вкладку.
  • Также я обернул в контейнер .container--content блоки с контентом – необходимое условие, если вдруг вы захотите использовать вкладки много раз на странице и при этом не добавлять лишних классов, айдишников и так далее.
// получаем массив всех вкладок
const tabs = document.querySelectorAll(".tab");
// получаем массив всех блоков с содержимым вкладок
const contents = document.querySelectorAll(".content");
 
// запускаем цикл для каждой вкладки и добавляем на неё событие
for (let i = 0; i < tabs.length; i++) {
	tabs[i].addEventListener("click", ( event ) => {
 
		// сначала нам нужно удалить активный класс именно с вкладок
		let tabsChildren = event.target.parentElement.children;
		for (let t = 0; t < tabsChildren.length; t++) {
			tabsChildren[t].classList.remove("tab--active");
		}
		// добавляем активный класс
		tabs[i].classList.add("tab--active");
		// теперь нужно удалить активный класс с блоков содержимого вкладок
		let tabContentChildren = event.target.parentElement.nextElementSibling.children;
		for (let c = 0; c < tabContentChildren.length; c++) {
			tabContentChildren[c].classList.remove("content--active");
		}
		// добавляем активный класс
		contents[i].classList.add("content--active");
 
	});
}
  • Сначала мы получаем массив всех существующих вкладок на сайте и блоков с контентом при помощи document.querySelectorAll().
  • Затем запускаем цикл для вкладок и добавляем событие клика на каждую из них.
  • В теле цикла удаляем и добавляем классы, обозначающие вкладки как активные и отображающие контент.

Если вам вдруг непонятны какие-то моменты, то можете посмотреть видео:

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 14

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.