Сделать вкладку активной при нажатии с помощью JavaScript

Question

То, что я пытаюсь выполнить sh, - это сделать активную вкладку, на которую щелкнули

Я видел много jQuery примеров, но я использую JavaScript ES6

Я знаю, что это простая задача, но сейчас мой разум настолько занят, что я не могу думать

вот код: https://codepen.io/revatto/pen/wvMzOqo

вот мой основной . js:

const tabs = document.querySelectorAll('[data-tab-target]');
const tabsContents = document.querySelectorAll('[data-tab-content]');

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

Answer 1

Вы добавляли и удаляли только «активный» класс из содержимого вкладки, вам нужно сделать то же самое с «li», т.е. со списком.

const tabs = document.querySelectorAll('[data-tab-target]');
const tabsContents = document.querySelectorAll('[data-tab-content]');

tabs.forEach(tab => {
    tab.addEventListener('click', (e) => {
        const target = document.querySelector(tab.dataset.tabTarget);

        tabsContents.forEach(tabContent => {
            tabContent.classList.remove('active');

        })

        target.classList.add('active');

        //loop through 'li' items and remove 'active' class
        tabs.forEach(tab => {
              tab.classList.remove('active');
          })

       //add 'active' class to clicked 'li' item
        e.target.classList.add("active");

    })
})