使用 JavaScript 单击时使选项卡处于活动状态

Question

What I am trying to accomplish is making the clicked tab active

I have seen a lot of jQuery examples, but I'm using JavaScript ES6

I know it's an easy task but my mind is so done right now that I can't think

here is the code: https://codepen.io/revatto/pen/wvMzOqo

here is my main.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

You were only adding and removing 'active' class from tab contents you need to do the same with 'li' ie list too.

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");

    })
})