title: Links not working when using a JQuery script and Bootstrap
body: <p>I'm trying to create a sidebar using Bootstrap and JQuery. I have written some JQuery code to mark the <code>&lt;li&gt;</code> element that was last clicked as active. The sidebar works when my code is commented out. But when I enable it the sidebar no longer redirect to a page when clicked. The highlighting does work though.</p>
  
  <p>JQuery code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          "use strict";
  
          $('ul.nav &gt; li').click(function (e) {
              e.preventDefault();
              $('ul.nav &gt; li').removeClass('active');
              $(this).addClass('active');
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>My sidebar:</p>
  
  <pre><code>ul class="nav flex-column"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="./"&gt;
                      &lt;span data-feather="home"&gt;&lt;/span&gt;
                      Dashboard
                      &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" href="#"&gt;
                      &lt;span data-feather="clock"&gt;&lt;/span&gt;
                      Recently added data
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
  
          &lt;h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1"&gt;
              &lt;span&gt;DATA&lt;/span&gt;
          &lt;/h6&gt;
          &lt;ul class="nav flex-column"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="./applications"&gt;
                      &lt;span data-feather="aperture"&gt;&lt;/span&gt;
                      Applications
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="./ships"&gt;
                      &lt;span data-feather="anchor"&gt;&lt;/span&gt;
                      Ships
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link " href="#"&gt;
                      &lt;span data-feather="users"&gt;&lt;/span&gt;
                      Users
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="./containertypes"&gt;
                      &lt;span data-feather="anchor"&gt;&lt;/span&gt;
                      Container types
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link " href="#"&gt;
                      &lt;span data-feather="terminal"&gt;&lt;/span&gt;
                      Terminals
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link " href="#"&gt;
                      &lt;span data-feather="alert-triangle"&gt;&lt;/span&gt;
                      Conflicts
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link " href="#"&gt;
                      &lt;span data-feather="box"&gt;&lt;/span&gt;
                      UNDGs
                  &lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link " href="#"&gt;
                      &lt;span data-feather="map-pin"&gt;&lt;/span&gt;
                      Ports
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>I am aware some links do not have a reference. This is because those pages don't exist yet. No, I am not trying to go to those pages.<br>
  I'm quite at a loss, never really used JQuery before.<br>
  Some help would be hugely appreciated!</p>