-2

我有一个带有一些导航的页面，如果那是我们所在的页面，我会尝试突出显示链接。它几乎像这样工作得很好：

function highlightPageInNav() {
        // Get file name.
        var filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
        // Build selector.
        var attrSelector = "a[href='" + filename + "']";
        // Set class of li to "current".
        $("#nav ul li").has(attrSelector).addClass("current");
}

问题是我的导航中的锚点说，例如，“CreateUser.aspx”，但如果当前 URL 包含“createuser.aspx”，脚本将不匹配。

我尝试了其他几个想法，包括使用以下内容替换上面的部分脚本。我将文件名转换为 toLowerCase()，然后尝试将其与 href .toLowerCase() 匹配，这些警报向我展示了我的期望，但$(this).addClass("current");实际上并没有做任何事情——我猜，很可能，因为$(this)不再适用于我要修改的元素。

$("#nav ul li a").each(function () {
    alert($(this).attr("href"));
    hrefLowerCase = $(this).attr("href").toLowerCase();
    alert(hrefLowerCase);
    if (filename == hrefLowerCase) {
        alert("found one!");
        $(this).addClass("current");  // This is where it stops doing what I desire.
    }
});

因此，如果有人可以向我展示如何非常简单地使我的脚本同时匹配“CreateUser.aspx”和“createuser.aspx”，那将不胜感激！谢谢！

4

2 回答 2

1

我已经稍微更正了 DGS 的答案以使其正常工作。

var filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1).toLowerCase();
$('#nav ul li a').each(function() {
    if ($(this).attr('href').toLowerCase() === filename) {
        $(this).parent().addClass('current');
    }
});

它应该将类 current 添加到li标签，而不是anchor。

建议的其他方法是使用过滤器：

var filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1).toLowerCase();
$('#nav ul li a').filter(function() {
    return $(this).attr('href').toLowerCase() === filename;
}).parent().addClass('current');
于 2013-09-11T14:25:48.410 回答
0 
var filename = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);    
$('#nav ul li a').filter(function() {
    return this.href.toLowerCase() == filename;
}).addClass('current');
于 2013-09-11T14:11:44.100 回答