Javascript 自定义导航选项卡在JQuery中消失

我用HTML、SCCS和JQuery制作了一个自定义导航选项卡。这是我的HTML代码：

<div class="shortcut-nav-wrapper">
    <div class="shortcut-tab shortcut-tab-active" data-tab="all">
        <p>All</p>
    </div>
    <div class="shortcut-tab" data-tab="tab1">
        <p>Tab 1</p>
    </div>
    <div class="shortcut-tab" data-tab="tab2">
        <p>Tab 2</p>
    </div>
    <div class="shortcut-tab" data-tab="tab3">
        <p>Tab 3</p>
    </div>
</div>

<div class="all">
test1
</div>
<div class="tab1 tab-hide">
test2
</div>
<div class="tab2 tab-hide">
test3
</div>
<div class="tab3 tab-hide">
test4
</div>

要从选项卡切换，我在JQuery中有一个如下函数：

$(".shortcut-tab").click(function () {
        $(this).addClass("shortcut-tab-active").siblings()
            .removeClass("shortcut-tab-active");
        const classview = $(this).attr("data-tab");
        $(`.${classview}`).removeClass("tab-hide").siblings()
            .addClass("tab-hide");
    });

造型和一切都很好。问题是当我从选项卡切换时，导航栏消失。按F5键后，导航栏返回

我制作了一个Jsfiddle，以便您可以看到其行为

如何解决从选项卡切换时导航不消失的问题

---

有人能给我指出正确的方向吗

这是因为您选择了所有同级，包括

.shortcut nav wrapper

，因为它也是同级。然后添加类

.tab hide

，并将其隐藏。因此，您所要做的就是将所有制表符div包装成一个单独的div

<div>
    <div class="all">
    test1
    </div>
    <div class="tab1 tab-hide">
    test2
    </div>
    <div class="tab2 tab-hide">
    test3
    </div>
    <div class="tab3 tab-hide">
    test4
    </div>
</div>

测试1
测试2
测试3
测试4

<div>
    <div class="all">
    test1
    </div>
    <div class="tab1 tab-hide">
    test2
    </div>
    <div class="tab2 tab-hide">
    test3
    </div>
    <div class="tab3 tab-hide">
    test4
    </div>
</div>