title: Navbar active class resets on page load
body: <p>Using bootstrap 4 and asp.net core for a personal project I've been tinkering with for the past couple of months. I've got a navbar in my _Layout that is shared across my entire site. I've also got some css that styles the navbar link text. </p>
  
  <p>I'm trying to change the active class on the links so the currently-visited controller is highlighted with a different color. I'm using js to do this. The color is changing initially, so I'm sure that the js is adding the active class to the new link and removing it from the previous active link, but when the page finishes loading, they reset and the active class goes back to Home. </p>
  
  <p>Here is my navbar in _Layout.cshtml:</p>
  
  <pre><code>&lt;nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"&gt;
  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;img src="~/images/logo1.png" width="40" height="40" alt="" /&gt;
  &lt;/button&gt;
  &lt;div class="collapse navbar-collapse" id="navbarToggler"&gt;
      &lt;ul class="nav navbar-nav mr-auto mt-2 mt-lg-0"&gt;
          &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" asp-action="Index" asp-controller="Home"&gt;Home&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" asp-action="Index" asp-controller="aaaa"&gt;Aaaa&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" asp-action="Index" asp-controller="bbbb"&gt;Bbbb&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" asp-action="Index" asp-controller="cccc"&gt;Cccc&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" asp-action="Index" asp-controller="dddd"&gt;Dddd&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;form class="form-inline my-2 my-lg-0"&gt;
          &lt;button class="btn btn-outline-danger btn-sm"
                  type="submit" asp-action="Login" asp-controller="Account"&gt;
              Login
          &lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the js that I'm declaring in the @scripts section of _Layout:</p>
  
  <pre><code>$( '.navbar-inverse .navbar-nav a' ).on( 'click', function () {
      $( '.navbar-inverse .navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
      $( this ).parent( 'li' ).addClass( 'active' );
  });
  </code></pre>
  
  <p>And my css: </p>
  
  <pre><code>.navbar-inverse .navbar-nav .open &gt; .nav-link, 
  .navbar-inverse .navbar-nav .active &gt; .nav-link, 
  .navbar-inverse .navbar-nav .nav-link.open, 
  .navbar-inverse .navbar-nav .nav-link.active {
      color: yellow;
  }
  </code></pre>
  
  <p>Why is the active link being reset when the new page loads? I know the js is working because while the page is loading, "Home" is not yellow anymore, but the new link I clicked in the navbar <em>is</em> yellow. But when the loading is complete, the yellow goes back to Home. Any insights would be appreciated, I'm rather new at software development.</p>