Question

我在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>

这是我的标签的SCCS代码：

 .shortcut-tab {
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        vertical-align: middle;

        p {
            color: black;
            margin-right: 56px;
            margin-top: 10px;
            margin-left: 50px;
        }

        &:hover {
            color: white;
            background-color: #D54606;
            border-radius: 25px;
            cursor: pointer;
        }
    }

    .tab-hide {
        display: none;
    }

要从选项卡切换，我在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，因此您可以看到其行为。

https://jsfiddle.net/cf20s43v/3/

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

有人可以指出我正确的方向吗？

Answer 1

这是因为您选择了所有同级，包括List<Employee> javaEmpList = empList.stream() .filter(emp -> emp.getSkills() .stream() .anyMatch(skill -> skill.getLanguage().equalsIgnoreCase("Java"))) .collect(Collectors.toList());，因为它也是同级。然后，它添加类.shortcut-nav-wrapper并被隐藏。因此，您要做的就是将所有tab-div包裹到一个单独的div

.tab-hide

https://jsfiddle.net/v9we0u4s/

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

1 个答案: