Делегирование клика отрабатывает, но не так как нужно. Клик висит на родителе табов и должен делегироваться только на обертки табов, но он распространяется и на вложенные элементы(иконки и текст) и когда event.target попадает на них, переключение не работает. Что нужно добавить в обработчик, чтобы убрать этот эффект?
.info
.info-header
.info-header__tab
+icon("med", "info-header__icon")
span.info-header__desc Лечение
.info-header__tab
+icon("sun", "info-header__icon")
span.info-header__desc Отдых
.info-header__tab
+icon("nature", "info-header__icon")
span.info-header__desc Природа
.info-header__tab
+icon("meditation", "info-header__icon")
span.info-header__desc Йога
.info-tabcontent.fade
const ShowTabs = () => {
let childTab = document.querySelectorAll('.info-header__tab'),
parentTab = document.querySelector('.info-header'),
contentTab = document.querySelectorAll('.info-tabcontent');
const hideTabContent = (a) => {
for (let i = a; i < contentTab.length; i++) {
contentTab[i].classList.remove('show');
contentTab[i].classList.add('hide');
}
};
hideTabContent(1);
const showTabContent = (b) => {
if (contentTab[b].classList.contains('hide')) {
contentTab[b].classList.remove('hide');
contentTab[b].classList.add('show');
}
};
parentTab.addEventListener('click', (event) => {
let target = event.target;
if (target && target.classList.contains('info-header__tab')) {
for (let i = 0; i < childTab.length; i++) {
if (target == childTab[i]) {
hideTabContent(0);
showTabContent(i);
break;
}
}
}
});
};
ShowTabs();