Простая и легкая JavaScript-библиотека для табов
- Никаких зависимостей. Библиотека написана на чистом JavaScript, для работы не требуются иные библиотеки.
- Простота и функциональность. Вы можете легко и быстро подключить и использовать библиотеку, которая реализует важный функционал для табов
- Доступность. Табы отвечают всем правилам доступности.
- Настройка с помощью CSS. Вы можете легко менять внешний вид, расположение с помощью CSS.
- Скачайте последнюю версию библиотеки
- Подключите graph-taba.min.css и graph-tabs.min.js из папки dist к странице
- Поместите в ваш html-документ следующую разметку:
<div class="tabs" data-tabs="tab">
<ul class="tabs__nav">
<li class="tabs__nav-item"><button class="tabs__nav-btn" type="button">Один</button></li>
<li class="tabs__nav-item"><button class="tabs__nav-btn" type="button">Два</button></li>
<li class="tabs__nav-item"><button class="tabs__nav-btn" type="button">Три</button></li>
</ul>
<div class="tabs__content">
<div class="tabs__panel">Один контент</div>
<div class="tabs__panel">Два контент</div>
<div class="tabs__panel">Три контент</div>
</div>
</div>
data-tabs
- важный дата-атрибут, через который и работает все взаимодействие с плагином. Значение этого атрибута должно быть уникальным для страницы.
- Разместите следующий JS-код для подключения табов:
const tabs = new GraphTabs('tab');
Вы можете сразу активировать нужный таб при загрузке страницы или любом другом событии с помощью метода switchTabs
. Пример:
tabs1.switchTabs(document.querySelector('#tab3'));
Библиотека поддерживает одно событие:
- Событие
isChanged
- срабатывает в момент переключения табов. Может принимать входной параметр - объект табов. Пример:
const tabs = new GraphTabs('tab', {
isChanged: (tabs) => {
console.log(tabs);
}
});
Пример работы библиотеки вы можете увидеть, открыв файл index.html из папки demo в браузере.
Приятного пользования!