Переключение табов

Question

Всем привет.

На странице есть табы в двух местах. Классы именовал по БЭМ что бы собственно продублировать блок на странице. Сейчас js написан только под одну группу табов. После добавление второй, как и ожидалось, обе группы реагируют на клики и на странице происходит полный бардак.

Подскажите пожалуйста что надо поправить или добавить в коде, что бы обе группы табов работали по отдельности?

Спасибо

Группа 1

<div class="projects__tabs">
    <button class="tab projects__tab" data-tab="#store">МАГАЗИНЫ</button>
    <button class="tab projects__tab" data-tab="#office">ОФИСЫ</button>
    <button class="tab projects__tab" data-tab="#private-house">ЧАСТНЫЕ ДОМА</button>
    <button class="tab projects__tab" data-tab="#warehouse">СКЛАДЫ</button>
    <button class="tab projects__tab" data-tab="#car-wash">АВТОМОЙКИ</button>
    <button class="tab projects__tab" data-tab="#skud">СКУД</button>
    <button class="tab projects__tab" data-tab="#doorphones">ДОМОФОНЫ</button>
    <button class="tab projects__tab" data-tab="#alarm">СИГНАЛИЗАЦИИ</button>
</div>
<div class="projects__content">
    <div class="projects__container" id="store"></div>
    <div class="projects__container" id="office"></div>
    <div class="projects__container" id="private-house"></div>
    <div class="projects__container" id="warehouse"></div>
    <div class="projects__container" id="car-wash"></div>
    <div class="projects__container" id="skud"></div>
    <div class="projects__container" id="doorphones"></div>
    <div class="projects__container" id="alarm"></div>
</div>

Группа 2

<div class="projects__tabs">
    <button class="tab projects__tab" data-tab="#video_1">ВИДЕО 1</button>
    <button class="tab projects__tab" data-tab="#video_2">ВИДЕО 2</button>
    <button class="tab projects__tab" data-tab="#video_3">ВИДЕО 3</button>
</div>
<div class="projects__content">
    <div class="projects__container" id="video_1"></div>
    <div class="projects__container" id="video_2"></div>
    <div class="projects__container" id="video_3"></div>
</div>

JavaScript

document.addEventListener('DOMContentLoaded', function () {

    let tabsBtn = document.querySelectorAll('.tab');
    let projects = document.querySelectorAll('.projects__container');

    tabsBtn.forEach(function (tab) {
        tab.addEventListener('click', function () {
                
            let currentTab = tab;
            let tabId = currentTab.getAttribute('data-tab');
            let project = document.querySelector(tabId);

            if (!currentTab.classList.contains('tab--active')) {
                tabsBtn.forEach(function (item) {
                    item.classList.remove('tab--active');
                });
                projects.forEach(function (item) {
                    item.classList.remove('project__container--active');
                });

                currentTab.classList.add('tab--active');
                project.classList.add('project__container--active');
            };

        });
    });

    document.querySelector('.tab').click();

});

Answer 1

Поместите ваше "табы" в разные дивы. Примерно так ->

 <div class="firts-tabs-group">
    <div class="projects__tabs"></div>
  </div>

И аналогично с второй группой.

 <div class="second-tabs-group">
    <div class="projects__tabs"></div>
  </div>

Далее через селектор в JS выбираете эти две группы

let firstTabsBtn = document.querySelectorAll('.first-tabs-group .tab');
let secondTabsBtn = document.querySelectorAll('.second-tabs-group .tab');

Ну а затем вешаете слушатель событий и все. Две группы работают отдельно.

БЛОГ НА HUSL

Переключение табов

Ответы (1 шт):