@OleksiiKK

Как сделать несколько блоков с табами?

Есть страница, в ней 3 блока с табами.

Есть такой код:

const tabs = document.querySelectorAll(".work__li");
const tabContents = document.querySelectorAll(".work__tab-wrapper3");

tabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    const target = document.querySelector(tab.dataset.tabTarget);
    tabContents.forEach((tabContent) => {
      tabContent.classList.remove("active");
    });
    tabs.forEach((tab) => {
      tab.classList.remove("active");
    });
    tab.classList.add("active");
    target.classList.add("active");
  });
});


Если дублировать код, и менять имена классов, то работают только последние табы. Как сделать этот кусок кода универсальным для всех табов на странице?
  • Вопрос задан
  • 46 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега JavaScript
I will live forever in the flame of your eyes.
1. Код из вопроса это чистый JS, а не Jquery.
2. Решить задачу можно если поместить скрипт в функцию, которую можно будет применять к разным блокам, обращаясь к ним по уникальному ID, например.
3. Так как вы не показали HTML разметку, покажу свой готовый вариант:

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AntonLitvinenko
@AntonLitvinenko
HTML coder
Как вариант создать из этого функцию, в которую передавать какой-нибудь дополнительный класс для каждого блока табов. И запустить ее столько раз сколько нужно, передавая класс обертки. или переписать функцию так, чтобы использовался this c проверкой на родителей и потомков
Ответ написан
Ваш ответ на вопрос

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

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