Change background color of the menu of active page and its sub-pages

Question

I am changing the background color of the current menu item.

For example i am on abc.com/tours so the color of the menu-item "tours" is changed to pink using the following code.

<script> 
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
    $(this).addClass("change_color_pink");
    }
});
});
</script>

How ever if i go to abc.com/tours/australia i want the menu-item "tours" to remain pink. What should i do?

NOTE: /tours/australia is a link inside /tours

Answer 1

您可以将颜色值存储在Cookie或url查询字符串中，然后在以下页面上将状态读回函数中。

Answer 2

If your model consists of an url and a menu consisting of html elements, you first have to introduce logic that can parse your url into relevant parts. This should be quite simple if your format is domain.com/child/child/child/... When you have this data, in an array for example, you have to project it to your html structure. Assuming that your menu markup is hierarchical, the algorithm would probably be not much harder then to iteratively find the top html element, do your modifications and search for the next top element inside the current element.