
Introduction
Let’s define first, what are tabs? Tabs are a page element, buttons that switch content on the page (hide or show). With the help of tabs, it is easy to divide the information on the page into any categories. Let’s figure out how to do this
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>
A lot of code, but here the content itself takes up most of the space. In fact, we are interested in buttons tabs__btn
with their date attributes, and tabs__content
with their attributes.
CSS
See it in the source
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');
};
});
What are we doing here?
- Finding all buttons and all contents into variables
tabsBtn
andtabsContent
… - We make a handler for clicking on tabs, and check if we click on the buttons
tabsBtn
– we perform some actions. - The first of them – we take away the attribute
data-tabs-path
the currently pressed button. - Second, we remove the activity class from all buttons
- Third, we find the current button and give it an activity class.
- We use the function
tabsHandler
, in which we remove the class from all contents and through the previously created variablepath
find the content you want and give it the activity class.
Everything is very simple, and you can see in more detail in the video at the beginning of the article.
Hope it was helpful. Good luck!