选项卡中的JavaScript (JS) ES6选项卡、嵌套问题、活动类被删除

Question

我在选项卡中有一些选项卡，我认为这是某种嵌套问题。

请参考我的代码示例，如果您单击“事件1”内的“选项2”，您可以看到文本“内容2”出现在它下面，这是完美的。

现在，如果您保持“选项2”仍然有效并单击“事件2”，然后单击返回到“事件1”，您可以看到“选项2”仍然有效，这很好，但“内容2”不是有效的，这是因为".tab__content“的有效类正在被移除。

奇怪的是，“选项2”仍然保持它的活动类，但内容不是。

您在这方面的帮助将非常感谢。

​

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

我通过手动将活动类添加到content div解决了这个问题。我的代码如下所示：

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

    });
}