jQuery保持活动菜单项突出显示 [英] jQuery keep active menu item highlighted

问题描述

我有一个菜单： http://jsfiddle.net/hu5x3hL1/3/

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;
}

活动菜单项以粗体突出显示。但是当我点击某个下拉链接时，在我的网站上，新页面打开，但活动菜单项已经不是粗体。如何在网站的新页面上以粗体突出显示？

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?

我试过这样做：

            $("#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');
            }
        });

但 this.href 返回 undefined ，实际上如果我使用某些链接而不是 this.href ，这段代码也会有误。

but this.href returns undefined, and actually if I use some link instead of this.href, this code also works incorrect.

推荐答案

你必须在dom ready处理程序中进行检查，而不是在点击处理程序中进行检查

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');

这篇关于jQuery保持活动菜单项突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！