Адаптивный tabs, проблема с иконкой при клике открыть контент, как исправить?

Всем привет.

При клике раскрыть вкладку, через js присваиваем в тег a, класс tabstovnl--active.
Все вроде ок, но есть иконка и при клике на нее, добавляется класс не в тег a, а уже в i, в этом и глюк, как поправить?

Иконок не видно, я там вместе них вставил слово icon, чтобы эмитировать клик.

Табс тут:
https://jsfiddle.net/vlit/ag14ju8s/223/
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
XanXanXan
@XanXanXan
Менять класс нужно не таргету (который может быть иконкой), а нужному элементу: target.closest('a')
spoiler
const tabstov = document.querySelectorAll(".tabstovnl");
const blocks = document.querySelectorAll(".tabstovb");

const tabClickHandler = ({ target }) => {
  const targetTab = target.closest('a');
  const block = document.querySelector(`${targetTab.getAttribute('href')}`);
  const isTargetNotActive = !targetTab.classList.contains('tabstovnl--active');

  if (isTargetNotActive) {
    tabstov.forEach(tab => tab.classList.remove("tabstovnl--active"));
    blocks.forEach(block => block.classList.remove("tabstovb--active"));
  }
  
  targetTab.classList.toggle("tabstovnl--active", isTargetNotActive);
  block.classList.toggle("tabstovb--active", isTargetNotActive);
}

tabstov.forEach(tab => tab.addEventListener("click", tabClickHandler));
Ответ написан
Ваш ответ на вопрос

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

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