jquery - 基于 url 激活的菜单

Question

我目前正在使用：

$(function () {
    var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");

    $('.mainmenu a').each(function () {
      if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
        $(this).addClass('active');
      }
    });
});

由于我使用的“mainmenu a”标签有一个带有link.html 的href，因此当url 包含link.html 时，此脚本运行良好。但是，当 url 包含即 /link/page （没有 .html 扩展名）时，我也希望它能够工作，反之亦然。基本上我希望它与包含 .html 扩展名的 url 一起使用，并且链接是一个目录。这可能吗？

Answer 1

是的，只需.html在进行比较之前用空字符串替换即可。然而，真正解决您的问题的方法是不允许在您的网站上混合使用干净的 URL 和基于文件名的 URL。

你可以这样做：

$(function () {
    var url = window.location.pathname.toLowerCase().replace(/(\/|\.html)$/, '').replace(/^\//, '');
    $('.mainmenu a').each(function () {
        var href = this.href.toLowerCase().replace(/(\/|\.html)$/, '').replace(/^\//, '');
        if (url === href) {
            $(this).addClass('active');
            return false; // break out of each()
        }
    });
});