Вступление #

Для работы табов можно использовать класс .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);