title: Add active class to nav li depending on url?
body: <p>I'm having some real hard time adding class active to the li that contains the current page the site is on. URL = <a href="http://polissagethibodeau.com/" rel="nofollow noreferrer">http://polissagethibodeau.com/</a></p>
  
  <p>Here is the relevant HTML</p>
  
  <pre><code>&lt;nav class="nav"&gt;
      &lt;ul class="sf-menu"&gt;
          &lt;li id="home"&gt;
              &lt;a href="./"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="./about.php"&gt;About us&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="./services.php"&gt;Services&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="./services.php#passenger"&gt;Car, Truck and Vans&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="./services.php#large"&gt;Semi, Boats, RV and Busses&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="./services.php#air"&gt;Airplanes and Helicopters&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="./services.php#polishing"&gt;Aluminum and Plexiglass polishing&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="./photo.php"&gt;Photos&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="./contact.php"&gt;Contact Us&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS I am trying to apply</p>
  
  <pre><code>.sf-menu &gt; li.active &gt; a {
    background: #c2e078;
  }
  </code></pre>
  
  <p>Here is the script I am trying to use to no success.</p>
  
  <pre><code>$(function() {
      var path = window.location.pathname.substring(1);
      $('.nav&gt;li&gt;a[href="' + path + '"]').parent().addClass('active');
  });
  </code></pre>