title: how to add class 'active' to nav item whose href is in the location.pathname
body: <p>I'm trying to build on top of a Jekyll template to build a blog style site. I'm currently in the process of writing and styling the navigation, which is giving me a couple of problems. Using the answer to <a href="https://stackoverflow.com/questions/20060467/add-active-navigation-class-based-on-url">this question</a> I've managed to add the class <code>active</code> on the current page, but here are the issues that still need ironing out:</p>
  
  <ul>
  <li>First, all the 'tabs' are active when the page loads, not just the 'home' tab:</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/7GiKf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7GiKf.png" alt="Project homepage screenshot"></a></p>
  
  <ul>
  <li>Second, the relevant 'tab' is no longer active when the url goes deeper than the first level of navigation. The url of the below screenshot is <code>[baseurl]/reviews/[name-of-post]</code>, but the reviews 'tab' is not active:</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/9OEZd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9OEZd.png" alt="enter image description here"></a></p>
  
  <p>I'm not sure how to approach the first problem, but for the second I think I will need to search the location.pathname for the relevant href, but I need to look further into this. Will update as necessary, but I've been playing around with this for ages with no luck so thought I'd post in the meantime.</p>
  
  <p>Below are the code snippets for the relevant parts:</p>
  
  <p>Side navigation HTML (written in Liquid)</p>
  
  <pre><code>&lt;nav id="side-nav"&gt;
    &lt;ul class="nav-items-list"&gt;
      &lt;li id="nav-item"&gt;&lt;a href="{{ site.baseurl }}/"&gt;&lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      {% for page in site.pages %}
      &lt;li id="nav-item"&gt;
        &lt;a href="{{ site.baseurl }}/{{ page.title | downcase }}/"&gt;
        &lt;i class="{{ page.icon }}"&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      {% endfor %}
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Example page (YAML frontmatter)</p>
  
  <pre><code>---
  layout: page
  title: Reviews
  permalink: /reviews/
  icon: "fas fa-star-half-alt"
  ---
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(function(){
    var current = location.pathname;
    $('#nav-item a').each(function(){
        var $this = $(this);
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
  })
  </code></pre>
  
  <p>That should hopefully be enough, but if any more code is needed, please let me know. All the code is also available on <a href="https://github.com/jamie-reece/glossd" rel="nofollow noreferrer">GitHub</a>, where the project is also <a href="https://jamie-reece.github.io/glossd/" rel="nofollow noreferrer">hosted on GitHub Pages</a>.</p>
  
  <p>Thanks in advance.</p>
  
  <p>Jamie</p>