не работает клик на обработчике событий

Question

window.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('.tabcontent__descr'),
          tabsContent = document.querySelectorAll('.tabcontent'),
          tabsParent = document.querySelector('.tabheader__items');

    function hideTabContent() {
        tabsContent.forEach(item => {
            item.style.display = 'none';
        });

        tabs.forEach(item => {
            item.classList.remove('tabheader__item_active');
        });
    }

    function showTabContent(i = 0) {
        tabsContent[i].style.display = 'block';
        tabs[i].classList.add('tabheader__item_active');
    }

    hideTabContent();
    showTabContent();

    tabsParent.addEventListener("click", (event) => {
        const target = event.target;

        if (target && target.classList.contains('tabheader__item')) {
            tabs.forEach((item, i) => {
                if (target == item) {
                    hideTabContent();
                    showTabContent(i);
                }
            });
        }
    });
});

Html

<div class="tabcontent">
                    <img src="img/tabs/vegy.jpg" alt="vegy">
                    <div class="tabcontent__descr">
                        Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Для людей, которые интересуются спортом; активных и здоровых. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!
                    </div>
                </div>
                <div class="tabcontent">
                    <img src="img/tabs/elite.jpg" alt="elite">
                    <div class="tabcontent__descr">
                        Меню “Премиум” - мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!                                     
                    </div>
                </div>
                <div class="tabcontent">
                    <img src="img/tabs/post.jpg" alt="post">
                    <div class="tabcontent__descr">
                        Наше специальное “Постное меню” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения. Полная гармония с собой и природой в каждом элементе! Все будет Ом!                                     
                    </div>
                </div>
                <div class="tabcontent">
                    <img src="img/tabs/vegy.jpg" alt="vegy">
                    <div class="tabcontent__descr">
                        Меню "Сбалансированное" - это соответствие вашего рациона всем научным рекомендациям. Мы тщательно просчитываем вашу потребность в к/б/ж/у и создаем лучшие блюда для вас.
                    </div>
                </div>
                <div class="tabheader">
                    <h3>Выберите стиль питания</h3>
                    <div class="tabheader__items">
                        <div class="tabheader__item tabheader__item_active">Фитнес</div>
                        <div class="tabheader__item">Премиум</div>
                        <div class="tabheader__item">Постное</div>
                        <div class="tabheader__item">Сбалансированное</div>
                    </div>
                </div>

Answer 1

document.addEventListener('DOMContentLoaded', () => {
    const tabsContent = document.querySelectorAll('.tabcontent');
    const tabs = document.querySelectorAll('.tabheader__item');

    function hideTabContent() {
        tabsContent.forEach(item => {
            item.style.display = 'none';
        });

        tabs.forEach(item => {
            item.classList.remove('tabheader__item_active');
        });
    }

    function showTabContent(i) {
        tabsContent[i].style.display = 'block';
        tabs[i].classList.add('tabheader__item_active');
    }

    hideTabContent();
    showTabContent(0);

    document.querySelector('.tabheader__items').addEventListener("click", (event) => {
        const target = event.target;
        if (target && target.classList.contains('tabheader__item')) {
            tabs.forEach((item, i) => {
                if (target === item) {
                    hideTabContent();
                    showTabContent(i);
                }
            });
        }
    });
});

.tabheader__items {
  display: flex;
}

.tabheader__item {
  cursor: pointer;
  border: 1px dotted grey;
  padding: 5px;
}

.tabheader__item_active {
  background-color: #ff0000; 
  color: #ffffff; 
}

<div class="tabcontent">
    <img src="img/tabs/vegy.jpg" alt="vegy">
    <div class="tabcontent__descr">
        Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Для людей, которые интересуются спортом; активных и здоровых. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!
    </div>
</div>
<div class="tabcontent">
    <img src="img/tabs/elite.jpg" alt="elite">
    <div class="tabcontent__descr">
        Меню “Премиум” - мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!
    </div>
</div>
<div class="tabcontent">
    <img src="img/tabs/post.jpg" alt="post">
    <div class="tabcontent__descr">
        Наше специальное “Постное меню” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения. Полная гармония с собой и природой в каждом элементе! Все будет Ом!
    </div>
</div>
<div class="tabcontent">
    <img src="img/tabs/vegy.jpg" alt="vegy">
    <div class="tabcontent__descr">
        Меню "Сбалансированное" - это соответствие вашего рациона всем научным рекомендациям. Мы тщательно просчитываем вашу потребность в к/б/ж/у и создаем лучшие блюда для вас.
    </div>
</div>
<div class="tabheader">
    <h3>Выберите стиль питания</h3>
    <div class="tabheader__items">
        <div class="tabheader__item tabheader__item_active">Фитнес</div>
        <div class="tabheader__item">Премиум</div>
        <div class="tabheader__item">Постное</div>
        <div class="tabheader__item">Сбалансированное</div>
    </div>
</div>

Этот код создает табы, чтобы переключать контент между вкладками при клике на элементы вкладок.

БЛОГ НА HUSL

не работает клик на обработчике событий

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