Question

我有以下代码，如果菜单项url == current url：

，应该在菜单项中添加一个活动的css类

$("#accordion a").each(function() 
{   
    if (this.href.search(window.location.hostname) != -1)
    {
        $(this).addClass("active-sidebar-link");
    }
});

但是这会将类添加到所有菜单项中。任何提示？

Answer 1

试试这个：

$("#accordion a").each(function() {   
    if (this.href == window.location.href) {
        $(this).addClass("active-sidebar-link");
    }
});

Answer 2

$('#accordion a[href="'+ window.location.hostname +'"]').addClass('active-sidebar-link');

Answer 3

如果你想用jQuery做这件事，你可以：

$("#accordion a").addClass(function(){
  return this.href === window.location 
    ? "active-sidebar-link" 
    : "" ;
});

然而，有一种更好的方式来设置当前页面链接的样式。这通常涉及为body元素提供与您的链接对应的类名：

<body class="home">
   <a class="home" href="foo.html">Home</a>
   <a class="contact" href="bar.html">Contact</a>
</body>

在这种情况下，您可以选择以下活动链接样式：

body.home a.home,
body.contact a.contact {
  color: green;
}

此方法不需要JavaScript来设置初始样式，这总是好的。

Answer 4

使用过滤功能：

$("#accordion a")
.filter(function(){ 
    return location.href.match($(this).attr("href"))
})
.addClass("active-sidebar-link");

仅返回已过滤的元素，在这种情况下，它们是与当前网址的链接，并将类active-sidebar-link添加到其中。

jquery活动类到基于当前url的菜单项

4 个答案: