javascript - 选项卡中的 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>

标签： javascriptecmascript-6nestedtabs

Answer 1

我通过手动向内容添加活动类解决了这个问题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');

    });
}