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

Question

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

 Product 
 Notebook 
 Pencil 
 Bags

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);
  });

user_10441671 · Answer

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; }

 Product 
 Notebook 
 Pencil 
 Bags

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

1 Answers