Вступление #

Для работы табов можно использовать класс .js-tab по умолчанию и специальную разметку.

Установка #

Пример разметки и инициализации табов.

<div class="js-tab">
	<div class="tab-nav" aria-label="Некоторые направления в архитектуре">
		<button class="tab-trigger" type="button">Брутали́зм</button>

		<button class="tab-trigger" type="button" aria-selected="true">Деконструктиви́зм</button>

		<button class="tab-trigger" type="button">Архитектурный модернизм</button>
	</div>

	<div class="tab-main">
		<div class="tab-content">
			<div class="tab-hidden">
				<p>
					<b>Брутали́зм</b> — направление (стиль) в архитектуре периода 1950-х — 1970-х
					годов, первоначально в архитектуре Великобритании. Одна из ветвей послевоенного
					архитектурного модернизма. Отправной точкой брутализма считаются проекты и
					теоретические работы архитекторов-англичан Элисон и Питера Смитсонов. Стиль имел
					распространение почти во всех странах Европы и мира, в том числе в США, Канаде,
					Японии, Бразилии, странах Скандинавии и бывшего СССР.
				</p>
			</div>
		</div>

		<div class="tab-content">
			<div class="tab-hidden">
				<p>
					<b>Деконструктиви́зм</b> — направление (стиль) в архитектуре периода 1950-х —
					1970-х годов, первоначально в архитектуре Великобритании. Одна из ветвей
					послевоенного архитектурного модернизма. Отправной точкой брутализма считаются
					проекты и теоретические работы архитекторов-англичан Элисон и Питера Смитсонов.
					Стиль имел распространение почти во всех странах Европы и мира, в том числе в
					США, Канаде, Японии, Бразилии, странах Скандинавии и бывшего СССР.
				</p>
			</div>
		</div>

		<div class="tab-content">
			<div class="tab-hidden">
				<p>
					<b>Архитектурный модернизм</b> — движение в архитектуре двадцатого века,
					переломное по содержанию, связанное с решительным обновлением форм и
					конструкций, отказом от художественных стилей прошлого. Охватывает период с
					начала 1900-х годов и по 1960-е годы, когда в архитектуре стран Западной Европы
					и США возникли новые тенденции искусства постмодернизма. В специальной
					литературе термину «архитектурный модернизм» соответствуют английские термины
					«modern architecture», «modern movement» или же просто «modern», используемые в
					том же контексте. Выражение «модернизм» употребляется иногда в качестве синонима
					понятия «современная архитектура».
				</p>
			</div>
		</div>
	</div>
</div>

BasicTabs.init('.my-tab')
BasicTabs.init(document.querySelector('.my-tab'))
BasicTabs.init(document.querySelectorAll('.my-tab'))

// или

BasicTabs.init() // по умолчанию инициaлизирует элементы с классом .js-tab

Конфигурация #

Настройки, заданные с использованием data-атрибутов.

data-tab-nav #

Можно создать отдельную таб-навигацию и связать её с основным табом. В значениях используются класс или идентификатор таб-навигации.

<div class="tab-nav" id="custom-tab-nav" aria-label="Некоторые направления в архитектуре">
	<button class="tab-trigger" type="button">Брутали́зм</button>
	<button class="tab-trigger" aria-selected="true" type="button">Деконструктиви́зм</button>
	<button class="tab-trigger" type="button">Архитектурный модернизм</button>
</div>

<div class="js-tab" data-tab-nav="#custom-tab-nav">
	<div class="tab-main">
		<div class="tab-content">
			<div class="tab-hidden">
				<p>
					<b>Брутали́зм</b> — направление (стиль) в архитектуре периода 1950-х — 1970-х
					годов, первоначально в архитектуре Великобритании. Одна из ветвей послевоенного
					архитектурного модернизма. Отправной точкой брутализма считаются проекты и
					теоретические работы архитекторов-англичан Элисон и Питера Смитсонов. Стиль имел
					распространение почти во всех странах Европы и мира, в том числе в США, Канаде,
					Японии, Бразилии, странах Скандинавии и бывшего СССР.
				</p>
			</div>
		</div>
		<div class="tab-content">
			<div class="tab-hidden">
				<p>
					<b>Деконструктиви́зм</b> — направление (стиль) в архитектуре периода 1950-х —
					1970-х годов, первоначально в архитектуре Великобритании. Одна из ветвей
					послевоенного архитектурного модернизма. Отправной точкой брутализма считаются
					проекты и теоретические работы архитекторов-англичан Элисон и Питера Смитсонов.
					Стиль имел распространение почти во всех странах Европы и мира, в том числе в
					США, Канаде, Японии, Бразилии, странах Скандинавии и бывшего СССР.
				</p>
			</div>
		</div>
		<div class="tab-content">
			<div class="tab-hidden">
				<p>
					<b>Архитектурный модернизм</b> — движение в архитектуре двадцатого века,
					переломное по содержанию, связанное с решительным обновлением форм и
					конструкций, отказом от художественных стилей прошлого. Охватывает период с
					начала 1900-х годов и по 1960-е годы, когда в архитектуре стран Западной Европы
					и США возникли новые тенденции искусства постмодернизма. В специальной
					литературе термину «архитектурный модернизм» соответствуют английские термины
					«modern architecture», «modern movement» или же просто «modern», используемые в
					том же контексте. Выражение «модернизм» употребляется иногда в качестве синонима
					понятия «современная архитектура».
				</p>
			</div>
		</div>
	</div>
</div>

Экземпляр #

У каждого инициализированного элемента есть свой экземпляр.

const myTab = document.querySelector('.my-tab')

console.log(myTab.BasicTabs) // пример экземпляра

Прослушивание событий #

Можно прослушать события элемента и получить нужные параметры.

tabs:change #

Срабатывает при выборе вкладки.

Параметры:

const myTab = document.querySelector('.my-tab')

myTab.addEventListener(
	'tabs:change',
	function () {
		console.log(event.detail) // параметры
	},
	false,
)