javascript - 通过检查与当前标题的匹配来将类添加到锚点？

Question

我有一个导航菜单，例如：

<div class="my_menu">
  <ul>
    <li><a href="http://localhost/en/about-us">About Us</a></li>
    <li><a href="http://localhost/en/contact">Contact</a></li>
  </ul>
</div>

我正在尝试编写一个函数以在与页面 url 匹配时向菜单添加一些活动类。

$(".top_navigation li a").filter(function() {
    alert($(this).href);
    alert($(location).attr('href'));
    return $(this).href() === $(location).attr('href');
  }).addClass('newClass');

我在哪里做错了？

Answer 1

您可以使用 直接访问页面 url location.href，不需要 jquery。

要获取 dom 元素的属性，您可以使用attr

 $(this).attr('href')

这应该有效：

$(".top_navigation li a").filter(function() {
    return $(this).attr('href') === location.href);
}).addClass('newClass');

Answer 2

这是一个小的、稍微简单的 jQuery 片段，它应该可以满足您的期望：

$(".topnavigation li a").each(function() {
    if($(this).attr("href") == window.location) {
        $(this).addClass("newClass");
    }
});

演示：小链接。

我希望这对你有帮助！

Answer 3

像这样做。

$(".top_navigation li a").addClass(function() {
    return this.href === location.href ? "newClass" : "";
});