title: How to add a class to currently visiting page and the parent directory for styling
body: <p>How can I add a class to the <strong>current page</strong> and the <strong>parent directory</strong> page or folder, so I can apply CSS styles?</p>
  <p>For example:</p>
  <pre><code>root
  |- Products
    |- Notebook
    |- Pencil
    |- Bags
  </code></pre>
  <p>Currently visiting: <a href="http://www.domain.com/products/notebooks" rel="nofollow noreferrer">www.domain.com/products/notebooks</a></p>
  <pre><code>&lt;a href=&quot;/products&quot; class=&quot;current&quot;&gt; Product &lt;/a&gt;
  &lt;a href=&quot;/products/notebook&quot; class=&quot;current&quot;&gt; Notebook &lt;/a&gt;
  &lt;a href=&quot;/products/pencil&quot;&gt; Pencil &lt;/a&gt;
  &lt;a href=&quot;/products/bags&quot;&gt; Bags &lt;/a&gt;
  </code></pre>
  <p>Result:</p>
  <p><em><strong>Products</strong></em><br>
  <em><strong>Notebooks</strong></em> || Pencil || Bags</p>
  <p>I am trying something like this but not success.</p>
  <pre><code>push(function() {
    var curUrl = location.pathname;
    $('a').each(function() {
      $(this).toggleClass('current', curUrl.indexOf($(this).attr('href')) != -1);
    });
  </code></pre>