Табы на чистом JS

Табы, также известные как вкладки, представляют собой элемент интерфейса, который упрощает пользовательскую навигацию между различными секциями контента. В веб-разработке табы часто создаются как набор ссылок или других HTML-элементов, которые обычно оформляются в виде вкладок или группы кнопок. При клике на такие вкладки одна из секций контента становится видимой, а остальные скрываются.

Основная цель использования табов заключается в улучшении организации информации на веб-сайте. Путем названия вкладок пользователь может легко определить, какой контент будет отображаться на странице после их активации. Это упрощает навигацию и помогает экономить место на странице, особенно в случаях, когда на сайте есть множество секций или разделов с информацией.

Табы представляют собой эффективный способ улучшения пользовательского опыта, делая навигацию более интуитивной и удобной. Их использование позволяет пользователям быстро переключаться между разными частями контента, не создавая при этом перегруженности страницы.

HTML

<div class="tabs">
  <ul class="tabs__list">
    <li class="tabs__item">
      <button class="tabs__btn tabs__btn--active" data-tabs-path="tabs1">Таб 1</button>
    </li>
    <li class="tabs__item">
      <button class="tabs__btn" data-tabs-path="tabs2">Таб 2</button>
    </li>
  </ul>
  
  <div class="tabs__content tabs__content--active" data-tabs-target="tabs1">
    Контент 1
  </div>
  <div class="tabs__content" data-tabs-target="tabs2">
    Контент 2
  </div>
</div>

CSS

 
.tabs {
    position: relative;
}

.tabs__list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.tabs__btn {
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.tabs__btn:hover {
}

.tabs__btn--active {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    pointer-events: none;
}

.tabs__content {
    display: none;
}

.tabs__content--active {
    display: block;
}



// Табы
    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');
    };