Question

我已经设置了一个jQuery活动状态导航，但是当他的URL中包含字符串时，我遇到麻烦让Active State正常运行。当URL不包含字符串（即LinkID = en）时，活动状态正常工作，但我的大多数网址都包含用于跟踪源的字符串。

我已经设置了一个评论清晰的演示，所以你可以看看。

有什么想法吗？

Answer 1

尝试使用window.location.pathname代替window.location.href，因为它提供了没有查询字符串的路径

$(function() {
    var url = window.location.pathname;
    var page = url.substr(url.lastIndexOf('/') + 2);
    target = $('#menu a[href*="' + page + '"]');
    $(target).addClass('active');
});

尝试

$(function () {
    var pathname = window.location.pathname;
    var page = pathname.match(/\/([^\/]+\.[^\/]+)/)[1];
    var target = $('#menu a[href*="' + page + '"]');
    $(target).addClass('active');
});

Answer 2

变化：

var url = window.location.href;
var page = url.substr(url.lastIndexOf('/') + 2);
target = $('#menu a[href*="' + page + '"]');
$(target).addClass('active');

为：

var page = window.location.pathname;
target = $('#menu a[href*="' + page + '"]');
$(target).addClass('active');

window.location.pathname将只检索网址的路径部分。

https://developer.mozilla.org/en-US/docs/Web/API/URLUtils.pathname

您确实应该将代码作为问题的一部分包含在内，因此，如果您更改或删除了测试页，则它与其他搜索相同内容的人相关。

编辑：

您可以反向执行，检查您的任何链接是否与当前网址的起始路径匹配。

$('#menu a').each(function(index, element){
    if (window.location.pathname.indexOf(this.href) == 0) {
        $(this).addClass('active');
        return false;
    }
})

如何使jQuery活动状态导航与包含字符串的URL一起使用？

2 个答案: