How to highlight appropriate menu list item of current page? In drop-down too

JavaScript
1

Hi there,
I have been trying to figure this one out for over an hour but couldn’t. My code works when you highlight a top menu item such as ‘Viesnage’ but there is also a drop-down menu. When a page from drop-down menu is opened which is a sub-category, I want to highlight an appropriate category. So let’s say when I press on ‘Hostels’, I want ‘Viesnage’ to be highlighted.

I have a menu which looks like this:

		<ul class="mainNav">			
			<li class="tab"><a href="http://kurvarom.local/vietos/viesnage" class="tabAnchor">Viesnage</a></a>
				<div class="dropdown">
					<div class="col">
						<ul>
							<li><a href="http://kurvarom.local/vietos/viesnage/viesbuciai">Viesbuciai</a></li>
							<li><a href="http://kurvarom.local/vietos/viesnage/hosteliai">Hosteliai</a></li>
						</ul>	
					</div>
				</div>
			</li>
		</ul>

I use such jQuery to highlight list items:

	var str=location.href.toLowerCase();

$(".mainNav li a").each(function() {
	if (str.indexOf(this.href.toLowerCase()) > -1) {
		$("li a.current").removeClass("current");
		$(this).addClass("current");
		$(this).parents("a.tabAnchor").addClass("current"); // I EXPECTED THIS TO WORK BUT IT DOES NOT
	}
});
2

Hi,

Could you post a link to a page where I can see your menu in action?

3

Thank you for helping me out :slight_smile: The website is www.beta.kurvarom.lt

4

Hi,

The page’s mark-up is invalid.
With particular reference to the menu, you have things like:

<li class="tab"><a href="http://www.beta.kurvarom.lt/vietos/kultura" class="tabAnchor">Kult&#363;ra</a></a>

Notice the double </a>.
You need to fix this first (definitely the menu, preferably the page).

5

The mark-up is not mine and I did not pay too much attention to it and didn’t even notice double </a>, thank you. I will first fix the mark-up, I will then post to this thread again.

6