JavaScript (JS) 选项卡内的 ES6 选项卡，嵌套问题，活动 class 被删除

Question

I have some tabs within tabs and what I believe to be some sort of nesting issue.

Please refer to my code example, if you click "Option 2" within "Event 1" you can see the text "Content 2" appears below it, which is perfect.

Now if you keep "Option 2" still active and click "Event 2" and then click back to "Event 1" you can see that "Option 2" is still active from before which is great, but the "Content 2" is not active, this is because the active class for that ".tab__content" is being removed.

It's odd that "Option 2" still keeps its active class but the content doesn't.

Your help with this would be greatly appreciated.

 const tabs = document.querySelectorAll('.tab'); for (const tab of Array.from(tabs)) { tab.addEventListener('click', function(e) { e.preventDefault(); let tabsContain = tab.parentNode.parentNode.dataset.tabs; const activeTab = tab.dataset.tab; const tabContents = document.querySelectorAll('[data-tabs="' + tabsContain + '"].tab__content'); for (const tab of Array.from(tabs)) { if(tab.parentNode.parentNode.dataset.tabs == tabsContain){ tab.classList.remove('active'); } } for (const tabContent of Array.from(tabContents)) { if(tab.parentNode.parentNode.dataset.tabs == tabsContain){ tabContent.classList.remove('active'); } } document.querySelector('[data-tabs="' + tabsContain + '"] [data-tab="' + activeTab + '"]').classList.add('active'); document.querySelector('[data-tabs="' + tabsContain + '"] [data-content="' + activeTab + '"]').classList.add('active'); }); }

 .tabs { margin-bottom: 2rem; }.tabs__links { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }.tab { display: flex; flex-direction: column; justify-content: center; background-color: white; padding: .75rem 1rem; margin-right: .5rem; margin-bottom: .5rem; }.tab:hover { text-decoration: none; background-color: grey; color: white; cursor: pointer; }.tab.active { background-color: blue; color: white; }.tabs__content.tab__content { display: none; padding: 1rem; background-color: grey; }.tabs__content.tab__content.active { display: block; }

 <div class="tabs" data-tabs="tabs-1"> <ul class="tabs__links"> <li class="tab active" data-tab="schedule-1"> Event 1 </li> <li class="tab" data-tab="schedule-2"> Event 2 </li> <li class="tab" data-tab="schedule-3"> Event 3 </li> </ul> <div class="tabs__content"> <div class="tab__content active" data-content="schedule-1"> <div class="tabs tabs--vertical" data-tabs="tabs-3"> <ul class="tabs__links"> <li class="tab active" data-tab="slot-1"> Option 1 </li> <li class="tab" data-tab="slot-2"> Option 2 </li> <li class="tab" data-tab="slot-3"> Option 3 </li> </ul> <div class="tabs__content"> <div class="tab__content active" data-content="slot-1"> <p>Content 1</p> </div> <div class="tab__content" data-content="slot-2"> <p>Content 2</p> </div> <div class="tab__content" data-content="slot-3"> <p>Content 3</p> </div> </div> </div> </div> <div class="tab__content" data-content="schedule-2">Content 2</div> <div class="tab__content" data-content="schedule-3">Content 3</div> </div> </div>

Answer 1

I solved the problem by manually adding active class to the content div . My code looks like this:

const tabs = document.querySelectorAll('.tab');

for (const tab of Array.from(tabs)) {

    tab.addEventListener('click', function(e) {
        e.preventDefault();

        let tabsContain = tab.parentNode.parentNode.dataset.tabs;
        const activeTab = tab.dataset.tab;
        const tabContents = document.querySelectorAll('[data-tabs="' + tabsContain  + '"] .tab__content');

        for (const tab of Array.from(tabs)) {
            if(tab.parentNode.parentNode.dataset.tabs == tabsContain){
                tab.classList.remove('active');
            }
        }

        for (const tabContent of Array.from(tabContents)) {
            if(tab.parentNode.parentNode.dataset.tabs == tabsContain){
                tabContent.classList.remove('active');
            }
        }

        //manually adding active class to the div
        document.querySelector(`[data-content='slot-${activeTab.slice(-1)}']`).classList.add("active")
        document.querySelector('[data-tabs="' + tabsContain  + '"] [data-tab="' + activeTab  + '"]').classList.add('active');
        document.querySelector('[data-tabs="' + tabsContain  + '"] [data-content="' + activeTab  + '"]').classList.add('active');

    });
}