Табы – это заголовки и соответствующие им блоки. Как правило, по умолчанию открыт только один блок, другие скрыты. При нажатии на заголовок отображается соответствующий блок.
Основные возможности
- Использование множества блоков с табами
- Открытие нужного таба по хэшу
- Превращение табов в спойлеры на указанной ширине экрана (удобно для адаптива)
- Возможность анимированного открытия табов
- Семантика
Подключение функционала
[HTML] В нужном месте вызвать tabs ( классы можно заменить на нужные). Или вручную создать структуру с соответствующими дата-атрибутами. Обратите внимание, что добавление класса _tab-active для заголовка таба сделает таб активным (открытым)
Пример блока с тремя табами:
<div data-tabs class="tabs">
<nav data-tabs-titles class="tabs__navigation">
<button type="button" class="tabs__title _tab-active">Таб №1</button>
<button type="button" class="tabs__title">Таб №2</button>
<button type="button" class="tabs__title">Таб №3</button>
</nav>
<div data-tabs-body class="tabs__content">
<div class="tabs__body">
Вміст першого таба
</div>
<div class="tabs__body">
Вміст другого таба
</div>
<div class="tabs__body">
Вміст третього таба
</div>
</div>
</div>[JS] В файле js/app.js раскомментировать строку flsFunctions.tabs();
[SCSS] (не обязательно) Если вы хотите сразу посмотреть на работу табов и оставили классы, предложенные снипетом, вы можете раскомментировать строку @import “base/tabs”; в файле src/scss/base.scss это подключит базовые стили, которые можно отредактировать под свои потребности.
Использование функционала
Превращение табов в спойлеры
Для того, чтобы преобразовываться в спойлеры, необходимо для элемента с атрибутом data-tabs указать значение ширины экрана ниже которой произойдет преобразование:
<div data-tabs="768" class="tabs">
...
</div>В момент преобразования к объекту с атрибутом data-tabs добавится класс _tab-spolle r, которым можно изменить стили для нового представления табов-спойлеров.
Открытие нужного таба по хэшу
Если необходимо открывать конкретный таб в конкретном блоке табов при открытии страницы по хэшу, необходимо для элемента с атрибутом data-tabs добавить атрибут data-tabs-hash :
<div data-tabs data-tabs-hash class="tabs">
...
</div>Теперь, при нажатии на заголовки табов, в адрес страницы будет добавляться хеш вида: #tab-0-1, где 0 – это идентификатор блока с табами, а 1 – идентификатор таба в этом блоке.
Соответственно, перейдя на страницу с хешем #tab-0-1, откроется второй таб в первом блоке с табами. При #tab-2-0 откроется первый таб в третьем блоке с табами и так далее.
Анимация при открытии таба
Для того чтобы табы открывались плавно, необходимо объекту с атрибутом data-tabs , добавить атрибут data-tabs-animate , а в качестве значения указать количество миллисекунд, за которые откроется таб (по умолчанию 500).
<div data-tabs data-tabs-animate="1000" class="tabs">
...
</div>Расположение и дополнительные данные
Функционал находится в js/files/functions.js . Название функции tabs()