Запрещение начальной загрузки 4 вкладок показывать содержимое вкладок

Question

Итак, я создал индексную страницу с представлением вкладок в начальной загрузке 4, и на каждой вкладке я добавил диапазон, содержащий X, чтобы пользователь мог закрыть вкладку.

Однако когда нажимается X, содержимое вкладки все еще отображается, я обнаружил несколько вопросов, касающихся чего-то похожего с начальной загрузкой 3, которые привели меня к JQuery

                <ul class="nav nav-tabs" role="tablist">
                    <li id="dashboardTab" class="nav-item"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a></li>
                    <li id="usersTab" class="nav-item" style="display: none;"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(0)">X</span></a></li>
                </ul> 

Это мои вкладки, ничего особенного.

    function onCloseTabButtonClick(pageNumber) {
        switch (pageNumber) {
            case 0:
                document.getElementById("usersTab").style.display = "none";
                $('#userCreate-tab').on('click', function (event) { event.preventDefault(); });
                break;
        }
    }

Это моя попытка остановить переключение страниц, я довольно новичок в JQuery, но, насколько я понимаю, event.preventDefault(); должен остановить переключение, однако оно все еще проходит.

Я проверил это, добавив туда console.log, и он сработал, поэтому я знаю, что мое событие click работает.

Если кто-нибудь может указать мне правильное направление, я был бы признателен.

UPDATE Пытался передать событие закрытия функции закрытия вкладки

        <link href="../Content/site.css" rel="stylesheet"/>
        <link href="../Content/bootstrap.min.css" rel="stylesheet"/>
        <script src="../Scripts/jquery-3.4.1.min.js"></script>
        <script src="../Scripts/bootstrap.min.js"></script>

<script type="text/javascript">
            function onCloseTabButtonClick(event, pageNumber) {
                switch (pageNumber) {
                    case 0:
                        document.getElementById("usersTab").style.display = "none";
                        event.preventDefault();
                        break;
                    case 1:
                }
            }
</script>

            <div id="container-fluid">
                <div class="row">
                    <div class="col-md-12" style="padding-right: 0px;">
                        <ul class="nav nav-tabs" role="tablist">
                            <li id="dashboardTab" class="nav-item"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a></li>
                            <li id="usersTab" class="nav-item" style="display: none;"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(event, 0)">X</span></a></li>
                        </ul>

                        <div class="tab-content">
                            <div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="dashboard-tab">
                               <%-- Dashboard Page--%>
                            </div>
                            <div id="userCreate" class="tab-pane fade" role="tabpanel" aria-labelledby="userCreate-tab">
                                <%--User Page--%>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

ОБНОВЛЕНИЕ 2 Попытка управлять событием click и hide с помощью JQuery

<script type="text/javascript">
            $("li.nav-item .tabCloser").click(function (e) {
                e.stopPropagation();
                $(this).parent().hide();
                var idHref=$(this).parent().attr("href");
                $(idHref).removeClass("active");
                console.log('JQuery Fired');
            })
</script>

   <ul class="nav nav-tabs" role="tablist">
       <li id="dashboardTab" class="nav-item"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a></li>
       <li id="usersTab" class="nav-item"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span class="tabCloser">X</span></a></li>
    </ul>

Answer 1

Попробуйте этот код:
HTML:

<ul class="nav nav-tabs" role="tablist">
  <li id="dashboardTab" class="nav-item" style="display: none;"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a><span class="x-close">X</span></li>
  <li id="usersTab" class="nav-item" style="display: none;"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users</a><span class="x-close">X</span></li>
</ul>
<div class="show-all">show all</div>

JavaScript:

$(document).ready(function() {
  $(".show-all").click(function() {
    $("li").show();
  });
  $(".x-close").click(function() {
    $(this).closest("li").hide();
  });
});

В этом коде есть div с классом show-all. При нажатии на нее отображаются все элементы li на странице. span элементы имеют класс x-close. При нажатии на него скрывается ближайший элемент li.
Смотри JSFiddle

Answer 2

Просто удалите класс Active контейнера

$("li.nav-item .tabCloser").click(function(e){
    e.stopPropagation();
    $(this).parent().hide();
    var idHref=$(this).parent().attr("href");
    $(idHref).removeClass("active");
})

попробуй эту скрипку https://jsfiddle.net/9hzymxs1/1/

Answer 3

Как насчет этого?Я изменил событие, чтобы передать данные события в onclick="onCloseTabButtonClick(event, 0)" и предотвратить исходный щелчок в обработчике.

<li id="usersTab" class="nav-item"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(event, 0)">X</span></a></li>

    function onCloseTabButtonClick(event, pageNumber) {
        switch (pageNumber) {
            case 0:
                document.getElementById("usersTab").style.display = "none";
                event.preventDefault();
                break;
        }
    }

Обновление:

Пример

    function onCloseTabButtonClick(event, pageNumber) {
        switch (pageNumber) {
            case 0:
                document.getElementById("usersTab").style.display = "none";
                event.preventDefault();
                break;
        }
    }

@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



 <ul class="nav nav-tabs" role="tablist">
                    <li id="dashboardTab" class="nav-item"><a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a></li>
                    <li id="usersTab" class="nav-item"><a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(event, 0)">X</span></a></li>
                </ul>