Вступление

Давайте определимся для начала, что же такое табы? Табы - это элемент страницы, кнопки, которые переключают контент на странице (скрывают или показывают). С помощью табов легко делить информацию на странице на какие-либо категории. Давайте разберемся, как такое сделать

HTML

<div class="tabs">
<ul class="tabs__list">
<li class="tabs__item"><button class="tabs__btn tabs__btn--active" data-tabs-path="main">Главная</button></li>
<li class="tabs__item"><button class="tabs__btn" data-tabs-path="archive">Архив</button></li>
<li class="tabs__item"><button class="tabs__btn" data-tabs-path="settings">Настройки</button></li>
</ul>
<div class="tabs__content tabs__content--active" data-tabs-target="main">
<div class="content">
<h2 class="content__title">Добро пожаловать!</h2>
<p class="content__descr">Здесь находятся все ваши активные заказы.</p>
<ul class="content__list">
<li class="content__item">
<a href="#" class="content__link" style="background-image: url('./img/1.png');">
<span class="content__text">Занятия йогой</span>
</a>
</li>
<li class="content__item">
<a href="#" class="content__link" style="background-image: url('./img/2.png');">
<span class="content__text">Кардио</span>
</a>
</li>
<li class="content__item">
<a href="#" class="content__link" style="background-image: url('./img/3.png');">
<span class="content__text">Силовые тренировки</span>
</a>
</li>
</ul>
</div>
</div>
<div class="tabs__content" data-tabs-target="archive">
<div class="content">
<h2 class="content__title">Добро пожаловать!2</h2>
<p class="content__descr">Здесь находятся все ваши активные заказы.</p>
<ul class="content__list">
<li class="content__item">
<a href="#" class="content__link" style="background-image: url('./img/1.png');">
<span class="content__text">Занятия йогой</span>
</a>
</li>
<li class="content__item">
<a href="#" class="content__link" style="background-image: url('./img/2.png');">
<span class="content__text">Кардио</span>
</a>
</li>
<li class="content__item">
<a href="#" class="content__link" style="background-image: url('./img/3.png');">
<span class="content__text">Силовые тренировки</span>
</a>
</li>
</ul>
</div>
</div>
<div class="tabs__content" data-tabs-target="settings">
<div class="content">
<h2 class="content__title">Добро пожаловать!3</h2>
<p class="content__descr">Здесь находятся все ваши активные заказы.</p>
<ul class="content__list">
<li class="content__item">
<a href="#" class="content__link" style="background-image: url('./img/1.png');">
<span class="content__text">Занятия йогой</span>
</a>
</li>
<li class="content__item">
<a href="#" class="content__link" style="background-image: url('./img/2.png');">
<span class="content__text">Кардио</span>
</a>
</li>
<li class="content__item">
<a href="#" class="content__link" style="background-image: url('./img/3.png');">
<span class="content__text">Силовые тренировки</span>
</a>
</li>
</ul>
</div>
</div>
</div>

Немаленький код, но тут больше всего места занимает сам контент. По факту, нас интересуют кнопки tabs__btn с их дата-атрибутами, а также tabs__content с их атрибутами.

CSS

Посмотрите его в исходниках

JS

document.addEventListener('DOMContentLoaded', () => {
const tabs = document.querySelector('.tabs');
const tabsBtn = document.querySelectorAll('.tabs__btn');
const tabsContent = document.querySelectorAll('.tabs__content');

if (tabs) {
tabs.addEventListener('click', (e) => {
if (e.target.classList.contains('tabs__btn')) {
const tabsPath = e.target.dataset.tabsPath;
tabsBtn.forEach(el => {el.classList.remove('tabs__btn--active')});
document.querySelector(`[data-tabs-path="${tabsPath}"]`).classList.add('tabs__btn--active');
tabsHandler(tabsPath);
}
});
}

const tabsHandler = (path) => {
tabsContent.forEach(el => {el.classList.remove('tabs__content--active')});
document.querySelector(`[data-tabs-target="${path}"]`).classList.add('tabs__content--active');
};
});

Что же мы тут делаем?

  1. Находим все кнопки и все контенты в переменные tabsBtn и tabsContent.
  2. Делаем обработчик клика по табам, и проверяем, если кликаем именно на кнопки tabsBtn - выполняем некие действия.
  3. Первое из них - забираем атрибут data-tabs-path у текущей нажатой кнопки.
  4. Второе - снимаем класс активности со всех кнопок
  5. Третье - находим текущую кнопку и даем ей класс активности.
  6. Используем функцию tabsHandler, в которой снимаем у всех контентов класс и через ранее созданную переменную path находим нужный контент и даем ему класс активности.

Все очень просто, и более детально вы можете посмотреть в видео в начале статьи.

Надеюсь, было полезно. Удачи!