Вступление #

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

Установка #

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

    <div class="js-tab">
        <div class="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="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 #

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

    <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>

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

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

tabs selected #

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

Параметры:

    document.querySelector('.my-tab').addEventListener('tabs selected', function() {

        console.log(event.detail); // параметры

    }, false);