如何判断href包含指定变量并为匹配链接添加active类求助

嘿，我一眼就瞅出你代码里的问题啦！在遍历.nav a的循环里，你每次都用$('.nav a').attr("href")去拿链接地址——这其实只会获取第一个.nav a标签的href值，根本不是当前正在遍历的那个元素的！这就是你的判断逻辑没生效的核心原因。

修正后的完整代码 #

把循环部分改成下面这样就可以正常工作了：

//获取URL参数
function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    var pair;
    for (var i=0; i<vars.length; i++) {
        pair = vars[i].split("=");
        if (pair[0] == variable){ return pair[1]; }
    }
    return false;
}
//将参数值存入变量activeLink
var activeLink = getQueryVariable("pagename");
// 修正后的遍历判断逻辑
$('.nav a').each(function() {
    // 用$(this)指代当前正在遍历的a元素
    if ($(this).attr("href") === activeLink) {
        $(this).addClass('active');
    }
});

额外优化小建议 #

1. 适配完整URL场景：如果你的href是带域名的完整路径（比如https://your-site.com/about），而activeLink只是about的话，可以用字符串结尾匹配来兼容：

if ($(this).attr("href").endsWith(activeLink)) {
    $(this).addClass('active');
}

2. 空值防护：如果URL里没有pagename参数，activeLink会返回false，这时候可以加个判断避免无效遍历：

if (activeLink) {
    $('.nav a').each(function() {
        if ($(this).attr("href") === activeLink) {
            $(this).addClass('active');
        }
    });
}

内容的提问来源于stack exchange，提问作者Jenny