Check out my menu example here: http://jsfiddle.net/hu5x3hL1/3/
Here is the HTML code:
<ul id="menu" class="sidebar">
<li> <a href="#" class="clickme">Menu</a>
<ul id="menu1">
<li><a class="dropdown-class-name" href="#">Dropdown link1</a></li>
<li><a class="dropdown-class-name" href="#">Dropdown link2</a></li>
</ul>
</li>
jQuery code:
$('#menu1 li a').click(function(e) {
$('a').removeClass('dropdown-class-name active');
$(this).addClass('dropdown-class-name active');
});
CSS styling:
#menu1 li a.active{
font-weight:bold;
}
Currently, when a dropdown link is clicked and a new page opens on the website, the active menu item loses its bold highlighting. How can I keep it bold on the new page?
I've attempted the following solution:
$("#menu1 li a").click(function () {
var url = window.location.href;
if (url == (this.href)) {
$('a').removeClass('dropdown-class-name active');
$(this).addClass('dropdown-class-name active');
}
});
Unfortunately, this.href returns undefined and using a specific link instead also does not work as expected.