SlavaMaxwell
@SlavaMaxwell
HTML-верстальщик

Как реализовать функцию для табов?

Всех приветствую, как прописать функцию один раз, если на странице несколько враперов с табами, чтобы не было дублирование кода по типу просто переименовывать классы в html и переменные в js, но суть логику скрипта та же, вот песочница https://codepen.io/vladgr/pen/XWNNydv и все это на чистом js, кто знает, напишите пожалуйста как реализовать готовым примером или ссылкой на такой пример, где множество враперов с табами могут быть на одной странице
  • Вопрос задан
  • 39 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
document.querySelector('.wrapper').addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('tabs-nav__item')) {
    const tabsHeaders = [...t.parentNode.children];
    const tabsContent = t.closest('.tabs').querySelectorAll('.tab');
    const index = tabsHeaders.indexOf(t);

    tabsHeaders.forEach((n, i) => n.classList.toggle('is-active', i === index));
    tabsContent.forEach((n, i) => n.classList.toggle('is-active', i === index));
  }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Санкт-Петербург
от 160 000 до 220 000 ₽
01 мар. 2021, в 10:03
2000000 руб./за проект
01 мар. 2021, в 09:29
1 руб./за проект