I have a menu: http://jsfiddle.net/hu5x3hL1/3/
<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>
$('#menu1 li a').click(function(e) {
$('a').removeClass('dropdown-class-name active');
$(this).addClass('dropdown-class-name active');
});
#menu1 li a.active{
font-weight:bold;
}
Active menu item is highlighted in bold. But on my web-site when I click some drop down link, the new page opens, but active menu item already isn't bold. How to keep it highlighted in bold on the new page of the web-site?
I tried do this:
$("#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');
}
});
but this.href
returns undefined
, and actually if I use some link instead of this.href
, this code also works incorrect.
You will have to do the check in the dom ready handler, not in the click handler
$('#menu1 li a').click(function (e) {
$('a').removeClass('dropdown-class-name active');
$(this).addClass('dropdown-class-name active');
});
var url = window.location.pathname;//need to make sure that this is the href value
$('#menu1 li a[href="'+url+'"]').addClass('dropdown-class-name active');
Try this
$('#menu1 li a').click(function(e) {
if($('a').hasClass('dropdown-class-name active')=="false"){$('a').removeClass('dropdown-class-name active');}
$(this).addClass('dropdown-class-name active');
});
did you tried to put the anchor reference in the selector?
var localURL = '[href="'+window.location.href+'"]'
$('#menu1 li a'+localURL).click(function(e) {
$('a').removeClass('dropdown-class-name active');
$(this).addClass('dropdown-class-name active');
});
http://jsfiddle.net/hnxhcbgw/1/
keep in mind that this will only run on click events, you should do it too on load event.
the below code should work
$("#menu1 li a").click(function() {
var $Link = $(this); // cache it as we will use ot mote than once
//also url == a.href cannot return true if you use relative url in the link.
//url most likely http://domain.com/pagename href will be just a page name
//if active do nothing
if (!$Link.hasClass("active")) {
$Link.closest("ul") //find menu container
.find("a.active").removeClass('active'); //find active and remove it
$Link.addClass('active');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.