SteveRoad
@SteveRoad

Почему не работает скрипт на смену активной кнопки?

Делаю небольшой интернет каталог для магазина, JavaScript знаю плоховато, поэтому столкнулся с проблемой.
При нажатии на другую категорию должна меняться активная кнопка и появляться содержимое категории соответствующей кнопки.

  • Вопрос задан
  • 93 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
В обработчик клика передаётся объект события, а не элемент. А ещё значения data-country почему-то на русском - какого чёрта? Надо, чтобы были такими же, как и id у элементов .tabcontent.

Править атрибуты я конечно не буду, а код вот:

const tabLinks = document.querySelectorAll('.tablinks');
const tabContent = document.querySelectorAll('.tabcontent');

tabLinks.forEach(n => n.addEventListener('click', openTab));

function openTab({ currentTarget: t }) {
  const { country } = t.dataset;
  tabLinks.forEach(n => n.classList.toggle('active', n === t));
  tabContent.forEach(n => n.classList.toggle('active', n.id === country));

  // или, к чёрту data-атрибуты и id, можно индексами воспользоваться;
  // конечно, в этом случае необходимо, чтобы .tablinks и соответствующие им
  // .tabcontent были расположены в одинаковом порядке
  const index = Array.prototype.indexOf.call(tabLinks, t);
  tabLinks.forEach(n => n.classList.toggle('active', n === t));
  tabContent.forEach((n, i) => n.classList.toggle('active', i === index));
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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