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" class="current"> Product </a>
<a href="/products/notebook" class="current"> 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);
});
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>