How to add a class to currently visiting page and the parent directory for styling-CodePudding

How can I add a class to the current page and the parent directory page or folder, so I can apply CSS styles?

For example:

root
|- Products
  |- Notebook
  |- Pencil
  |- Bags

Currently visiting: www.domain.com/products/notebooks

<a href="/products" > Product </a>
<a href="/products/notebook" > Notebook </a>
<a href="/products/pencil"> Pencil </a>
<a href="/products/bags"> Bags </a>

Result:

Products
Notebooks || Pencil || Bags

I am trying something like this but not success.

push(function() {
  var curUrl = location.pathname;
  $('a').each(function() {
    $(this).toggleClass('current', curUrl.indexOf($(this).attr('href')) != -1);
  });

CodePudding user response：

Finding URL in location works, see snippet below (not using location.pathname just for the snippet, of course keep it in your code).

The push(function() { ... surrounding the function is maybe not needed. Just wait for document ready.

var curUrl = 'https://example.com/shop/products/notebook'; //location.pathname;
$('a').each(function() {
  $(this).toggleClass('current', curUrl.indexOf($(this).attr('href')) != -1);
});

* { margin: 0; padding; 0; }
a { font-size: 14px; text-decoration: none; margin: 4px; }
a.current { font-weight: bold; }

<a href="/products"> Product </a>
<a href="/products/notebook"> Notebook </a>
<a href="/products/pencil"> Pencil </a>
<a href="/products/bags"> Bags </a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>