如何阻止此JavaScript错误地添加“活动”＃39;根＆＃39; /＆＃39;链接？

Question

我正在使用此JavaScript自动添加＆＃39;有效＆＃39; CSS到当前页面的导航栏链接，但它也不断添加“活跃”＃39;到主页＆＃39; /＆＃39;链接。

我该如何防止这种情况？

var url = window.location;
var element = $('ul.nav a').filter(function() {
    return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
    element.addClass('active');
}

例如，我在订单页面上，但它还在信息中心链接active中添加了/。

Answer 1

假设您的链接不包含查询字符串或片段标识符。请注意，window.location.href可以像http://example.org/page#contact。

var url = window.location.href;
var element = $('ul.nav a').filter(function() {
    return this.href === url || url.substr(0, this.href.length) === this.href && /\W/.test(url.charAt(this.href.length));
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
    element.addClass('active');
}

另请注意，/page/2在我的示例中等于/page。您可以在我的unit tests中查看其工作原理。