Ссылки не работают при использовании скрипта JQuery и Bootstrap

Question

Я пытаюсь создать боковую панель, используя Bootstrap и JQuery.Я написал некоторый код JQuery, чтобы пометить элемент <li>, который последний раз был нажат, как активный.Боковая панель работает, когда мой код закомментирован.Но когда я включаю его, боковая панель больше не перенаправляется на страницу при нажатии.Хотя выделение работает.

Код JQuery:

<script type="text/javascript">
    $(document).ready(function () {
        "use strict";

        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

Моя боковая панель:

ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="./">
                    <span data-feather="home"></span>
                    Dashboard
                    <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="clock"></span>
                    Recently added data
                </a>
            </li>
        </ul>


        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1">
            <span>DATA</span>
        </h6>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="./applications">
                    <span data-feather="aperture"></span>
                    Applications
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="./ships">
                    <span data-feather="anchor"></span>
                    Ships
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">
                    <span data-feather="users"></span>
                    Users
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="./containertypes">
                    <span data-feather="anchor"></span>
                    Container types
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">
                    <span data-feather="terminal"></span>
                    Terminals
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">
                    <span data-feather="alert-triangle"></span>
                    Conflicts
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">
                    <span data-feather="box"></span>
                    UNDGs
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link " href="#">
                    <span data-feather="map-pin"></span>
                    Ports
                </a>
            </li>
        </ul>

Я знаю, что некоторые ссылки не имеют ссылки.Это потому, что эти страницы еще не существуют.Нет, я не пытаюсь зайти на эти страницы.
Я в растерянности, никогда раньше не использовал JQuery.
Некоторая помощь будет очень признательна!

Answer 1

Я полагаю, что e.preventDefault(); останавливает распространение клика на якоря в тегах li.

Я склонен обновлять класс active после загрузки страницы против ссылки перед привязкой.

Для справки: https://api.jquery.com/event.preventdefault/

Answer 2

Просто удалите e.preventDefault() (вы увидите, что ваш элемент активируется очень быстро, прежде чем вы получите 404: D, так как страниц не существует), но вы можете поставить «предупреждение» после изменения стиля, чтобы увидеть, что это на самом делерабочий.