title: Set active link with jQuery in multipage page
body: <p>I know its not the first question.</p>
  
  <p>I tried from <a href="https://stackoverflow.com/questions/14039968/jquery-make-a-link-in-active-status">jQuery Make a Link in Active Status</a>, but its not working, when I click to go different page the <code>'a'</code> didnt have class active. any suggestion thanks.</p>
  
  <pre><code>&lt;nav class="main-navi"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="index.html"&gt;
          Home
          &lt;span class="dot"&gt;&lt;/span&gt;
          &lt;span class="corner"&gt;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="portfolio.html"&gt;
          Portfolio
          &lt;span class="dot"&gt;&lt;/span&gt;
          &lt;span class="corner"&gt;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="about.html"&gt;
          About
          &lt;span class="dot"&gt;&lt;/span&gt;
          &lt;span class="corner"&gt;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
        &lt;a class="" href="service.html"&gt;
          services
          &lt;span class="dot"&gt;&lt;/span&gt;
          &lt;span class="corner"&gt;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="blog.html"&gt;
          Blog
          &lt;span class="dot"&gt;&lt;/span&gt;
          &lt;span class="corner"&gt;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="contact.html"&gt;
          contacts
          &lt;span class="dot"&gt;&lt;/span&gt;
          &lt;span class="corner"&gt;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;em id="showHideMenu" class="show-hide-menu fa fa-bars" href="#"&gt;&lt;/em&gt;
  &lt;/nav&gt;
  &lt;script&gt;
    jQuery(function($){
      $('.main-navi a').filter(function(){
        return $(this).attr('href').toLowerCase() === window.location.pathname.toLowerCase();
      }).addClass('active');
    });
  &lt;/script&gt;
  </code></pre>