javascript - jQuery 保持事件菜单项突出显示

Question

我有一个菜单: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;
}

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

我试过这样做:

            $("#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，此代码也无法正常工作。

Answer 1

您必须在 dom 就绪处理程序中进行检查，而不是在点击处理程序中进行检查

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