Javascript jQuery保持活动菜单项高亮显示

我有菜单：

HTML

CSS

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

我试着这样做：

            $("#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

，则此代码也不正确。

您必须在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');

试试这个

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

---

您是否尝试将锚点引用放入选择器中

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

---

请记住，这只会在单击事件时运行，您也应该在加载事件时运行。

下面的代码应该可以工作

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

---

$（this.attr（'href'）而不是this。href@OleHaugset应该使用

this.href

而不是

$（this.attr（'href'）

，因为它访问属性的速度要快得多。我尝试过，但当网页刷新时，它仍然返回

未定义的

。所有DOM修改默认为原始。感谢您的回答，我将这段代码放在document ready函数中，但结果是sameThanks，不幸的是，结果是sameThanks，用于回答问题，但即使单击将父项更改为最近值，您的代码也不起作用，它起作用$Link returns[object object]这是一个被点击的元素，所以$Link是它的jQuery包装版本。它只能通过点击来工作，但当加载新页面时，链接不是粗体的

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

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

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