Пользовательские вкладки исчезают в JQuery

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");
    });

Стиль и все работает нормально.Проблема в том, что когда я переключаюсь с tab , панель навигации исчезает.После того, как я нажму F5, панель навигации вернется.

Я сделал Jsfiddle, чтобы вы могли видеть поведение.

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

Как исправить, что навигация не исчезает при переключении с вкладки?

Может ли кто-нибудь указать мне правильное направление?

Answer 1

Это потому, что вы выбираете всех братьев и сестер, включая .shortcut-nav-wrapper, так как это также брат и сестра.Затем он добавляет класс .tab-hide и скрывается.Так что все, что вам нужно сделать, это обернуть все ваши вкладки в отдельный 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>

https://jsfiddle.net/v9we0u4s/