我有一个菜单:http://jsfiddle.net/hu5x3hL1/1/
HTML
<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
$('#menu1 li a').click(function(e) {
$('a').removeClass('dropdown-class-name active');
$(this).addClass('dropdown-class-name active');
});
CSS
#menu1 li a.active{
font-weight:bold;
}
事件菜单项以粗体突出显示。但是在我的网站上,当我单击某个下 zipper 接时,新页面会打开,但事件菜单项已经不是粗体了。如何在网站的新页面上保持粗体突出显示?
我尝试这样做:
$(document).ready(function() {
var url = window.location.href;
$("#menu1 li a").click(function () {
if (url == (this.href)) {
$('a').removeClass('dropdown-class-name active');
$(this).addClass('dropdown-class-name active');
}
});
});
我觉得这个想法是对的,但是哪里会出错呢?
最佳答案
问题是,当您单击链接时,会导致菜单重新加载并丢失事件链接的状态。您将旧页面上的菜单项设置为事件状态,然后浏览器跟随页面到达新页面,新页面不再事件,因为 HTML 再次加载,并且菜单项上没有设置任何事件类。
您需要做的是在页面加载时使用 Javascript 函数来检查哪个菜单项对应于当前 URL 并将该元素设置为事件状态。因此,它会在链接被点击并加载新页面后设置事件类,并且您实际上会在新页面上看到它。
$(document).ready(function () {
var url = window.location
var menuItem = $('#menu1 li a').filter(function() {
return this.href == url;
})
menuItem.addClass('active');
})
关于jquery - 保持菜单项突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26317263/