I'm using bootstrap v4.3.1 in a ASP.NET MVC core website. I have a navbar where I have the .active class on the a tag on the first li:

```
<nav class="navbar navbar-expand-md navbar-toggleable-md navbar-dark bg-navbar fixed-top mb-3">
  <div class="container">
    <a
      class="navbar-brand"
      asp-area=""
      asp-controller="Home"
      asp-action="Index"
    >
      <img id="nav-logo" src="~/Images/LOGO's.png" alt="G&Z Installation" />
    </a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target=".navbar-collapse"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse d-md-inline-flex flex-md-row-reverse">
      <ul class="nav ml-auto">
        <li class="nav-item">
          <a
            class="nav-link active text-light nav-text"
            asp-area=""
            asp-controller="Home"
            asp-action="Index"
          >
            Home
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link text-light nav-text"
            asp-area=""
            asp-controller="Home"
            asp-action="SolarPanels"
          >
            Zonnepanelen
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link text-light nav-text"
            asp-area=""
            asp-controller="Home"
            asp-action="AircoAndHeatPump"
          >
            Airco & Warmtepomp
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link text-light nav-text"
            asp-area=""
            asp-controller="Home"
            asp-action="Contact"
          >
            Contact
          </a>
        </li>
        @*
        <li class="nav-item">
          <a
            class="nav-link text-light"
            asp-area=""
            asp-controller="Home"
            asp-action="Privacy"
          >
            Privacy
          </a>
        </li>
        *@
      </ul>
    </div>
  </div>
</nav>;

```

I added this code:

```
$(document).ready(function () {
  $("a.nav-link.text-light.nav-text").on("click", function () {
    $(".nav").find(".active").removeClass("active");
    $(this).addClass("active");
  });
});

```

The active class is not changing after clicking an other li item. It is staying on the first li item.
Bootstrap is loaded in the head of the layout page:

```
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />

```

And the scripts are loaded at the bottom of the layout page:

```
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

```

EDIT:
When I look at the elements in the browser, I can see the active class been deleted from the first li item when I click the second, but then I see it automatically been added to the first li item again.. As if it refreshes or something..
If I edit the js-code (and the .active class on the li item instead of the a tag), it works, but then the navigation is not working anymore.. This is because of the "e.preventDefault()" where the "e" is for the a tag.. Whitout it will not work for the .active class..

```
$(document).ready(function () {
$('.nav li a').click(function (e) {

    $('.nav li.active').removeClass('active');

    var $parent = $(this).parent();
    $parent.addClass('active');
    e.preventDefault();
});});

```

It's been a while since I worked with bootstrap and asp.net mvc. I'm not seeing what I do wrong. Any tips?