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

【问题标题】：jquery active class to menu item based on current url基于当前url的jquery活动类到菜单项
【发布时间】：2012-05-15 02:54:46
【问题描述】：

如果菜单项 url == 当前 url，我有以下代码应该向菜单项添加一个活动的 css 类：

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

但这会将类添加到所有菜单项。有什么建议吗？

【问题讨论】：

window.location.hostname 将返回页面主机名，即stackoverflow.com。您应该改用location.href 或location.pathname 来获得正确的匹配。

标签： jquery

【解决方案1】：

试试这个：

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

【讨论】：

这可行，但是如果 URL 有片段，它将中断。例如domain.com/folder/#top.
使用pathname 代替href 应该会有所帮助。

【解决方案2】：

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

【讨论】：

【解决方案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 来设置初始样式，这总是好的。

【讨论】：

【解决方案4】：

使用过滤功能：

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

仅返回过滤后的元素，在本例中是与当前 URL 的链接，并向其中添加类 active-sidebar-link。

【讨论】：