I am in the final stages of completing the navigation for my website. I have included the jsfiddle code to display what I have so far. The issue I am facing is that my child links turn gray as intended, but I also want the top level link to turn gray when clicked. The structure of my pages is organized like this:
Page1
Page1a
Page1b
Page2
Page2a
.
.
.
ETC.
I am looking to make Page1 and Page2 turn gray like the sublevels do. Any assistance in resolving this matter would be greatly appreciated. Thank you for taking the time to help.
<script type="text/javascript">
$('#body').ready(function(){
var URL = location.pathname.split("/");
URL = URL[URL.length-1];
for(var i = 0; i < 11; i++){
if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) {
$('#nav ul:visible').slideUp('normal');
$('#i'+i).slideDown(0);
$('#i'+i)
.find('li')
.each( function() {
var current = $(this).find('a')[0];
if (current.href == window.location.href)
current.style.backgroundColor = "#ccc";
current.style.color = "#006";
});
}
}
});
</script>
Unfortunately, the answers provided below have not resolved my issue. While some have enabled the parent link to highlight, it has affected other functionalities. I still require the menu to highlight in yellow on hover, the submenus to remain light blue when inactive, and all active links (parent or child) to display the gray highlight when selected. Does anyone have a solution that addresses all these concerns?
You can find a potential solution to this problem in this post... Active Link on javascript menu to work on parent link not just child link