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

Question

[Антон Вебсайтовский]

Всем привет.

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

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

Табс тут:
https://jsfiddle.net/vlit/ag14ju8s/223/

Comments

[Антон Вебсайтовский]

пробовал применить к иконкам pointer-events: none; и aria-hidden="true" не помогло.

[Ankhena]

Антон Вебсайтовский, вы не иконкам pointer-events, а псевдо.

И я уже написала в прошлом вопросе: иконки это украшение, их незачем вставлять в разметку. Даже если они шрифтовые (жжуть)

[Антон Вебсайтовский]

Ankhena, да я делал, оно не работает.

[Антон Вебсайтовский]

Ankhena, да ладно уже, вон ниже подсказали.

[Ankhena]

Антон Вебсайтовский,

да я делал, оно не работает.

Показывайте

Answer 1

[Чипекве]

Менять класс нужно не таргету (который может быть иконкой), а нужному элементу: 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));

Comments

[Антон Вебсайтовский]

Работает, но есть косяк, при клике раскрыть, кидает куда-то.