@vlad89buzan

Javacript tabs проблема со всплытием?

Табы переключаются если только попасть точно в ".tabheader__item", если попасть в svg или h4 внутри не переключаются! собственно вопрос - как решить?
репозиторий https://vlad89buzan.github.io/Furniture2022/
github-page https://vlad89buzan.github.io/Furniture2022/dist

js
tabs(
        ".tabheader__item",
        ".tabcontent",
        ".tabheader__items",
        "tabheader__item--active"
    );
function tabs(tabsSelector,tabsContentSelector,tabsParentSelector, activeClass) {
    //tabs
    const tabs = document.querySelectorAll(tabsSelector);
    const tabsContent = document.querySelectorAll(tabsContentSelector);
    const tabsParent = document.querySelector(tabsParentSelector);
    console.log(tabs);
    console.log(tabsContent);
    console.log(tabsParent);
  
    function hideTabContent() {
      tabsContent.forEach((item) => {
        item.classList.add("hide");
        item.classList.remove("show", "fade");
      });
      tabs.forEach((item) => {
        item.classList.remove(activeClass);
      });
    }
    function showTabContent(i = 1) {
      tabsContent[i].classList.add("show", "fade");
      tabsContent[i].classList.remove("hide");
      tabs[i].classList.add(activeClass);
    }
  
    hideTabContent();
    showTabContent();
  
    tabsParent.addEventListener("click", (e) => {
      console.log('aaa');
      const target = e.target;
      console.log(e.target);
      
      if (target && target.classList.contains(tabsSelector.slice(1))) {
        tabs.forEach((item, i) => {
          if (target == item) {
            hideTabContent();
            showTabContent(i);
          }
        });
      }
    });
  }
  
  // module.exports = tabs;
  export default tabs;
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
@vlad89buzan Автор вопроса
function tabs(
tabsSelector,
tabsContentSelector,
tabsParentSelector,
activeClass
) {
//tabs
const tabs = document.querySelectorAll(tabsSelector);
const tabsContent = document.querySelectorAll(tabsContentSelector);
const tabsParent = document.querySelector(tabsParentSelector);

function hideTabContent() {
tabsContent.forEach((item) => {
item.classList.add("hide");
item.classList.remove("show", "fade");
});
tabs.forEach((item) => {
item.classList.remove(activeClass);
});
}
function showTabContent(i = 1) {
tabsContent[i].classList.add("show", "fade");
tabsContent[i].classList.remove("hide");
tabs[i].classList.add(activeClass);
}

hideTabContent();
showTabContent();

tabsParent.addEventListener("click", (e) => {

const target = e.target;


if (
target.classList.contains(tabsSelector.slice(1)) ||
target.closest(tabsSelector).classList.contains(tabsSelector.slice(1))
) {
tabs.forEach((item, i) => {

if (target == item || target.closest(tabsSelector) == item) {
hideTabContent();
showTabContent(i);
}
});
}
});
}

// module.exports = tabs;
export default tabs;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы