3

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

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

但这会将类添加到所有菜单项中。有小费吗？

4

4 回答 4

12

试试这个：

$("#accordion a").each(function() {   
    if (this.href == window.location.href) {
        $(this).addClass("active-sidebar-link");
    }
});
于 2012-05-15T03:00:51.473 回答
3 
$('#accordion a[href="'+ window.location.hostname +'"]').addClass('active-sidebar-link');
于 2012-05-15T03:54:09.877 回答
0

如果你想用 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 来设置初始样式，这总是好的。

于 2012-05-15T04:07:54.500 回答
0

使用过滤功能：

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

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

于 2012-05-15T04:45:09.520 回答