title: Adding active class to current page in nav with jQuery
body: <p>I'm trying to add the 'active' class to the current page's nav link in the header. I made some progress, but I'm running into a small bug, and would appreciate some help. I know the answer is quite obvious, however, I'm new to jQuery/Javascript and I'm having trouble finding it on my own.</p>
  
  <p>Here's my nav HTML structure:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="nav"&gt;
        &lt;ul class="navbar-nav ml-auto"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a href="/" class="nav-link"&gt;Me&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="/work"&gt;Work&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="/play"&gt;Play&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="/contact"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Simple enough. Here's the jQuery code:</p>
  
  <pre><code>$(function() {
    $('nav li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
  });
  </code></pre>
  
  <p>The code works on inner pages, however, I'm running into an issue wherein on the home page ('Me', href="/"), the code is adding the active class to all of the nav links.</p>
  
  <p>I think the problem would be solved if I used href="/work/" (added a / to the end of all links), however, when I do that, the links no longer work, because the site then tries to go to www.sitename.com/work/.php.</p>
  
  <p>This is either a simple .htaccess or jQuery fix, however I'm not sure which one, or how to implement it.</p>
  
  <p>Thanks!</p>