Jquery 活动类仅对第一个元素有效

我在一页中有以下列表：

        <ul id="gallery-list" class="gallery-list">
     <li>   <a class="gallery-link" href="fullurl/galleries/?phpvar=front-steps" id="Front"><h3>Front Steps Project</h3></a></li>
        <li>   <a class="gallery-link" href="fullurl/galleries?phpvar=cake-smash" id="Cake"><h3>Cake Smash</h3></a></li>
       <li>    <a class="gallery-link" href="fullurl/galleries?phpvar=big-kids" id="Big"><h3>Big Kids</h3></a></li>
        <li>   <a class="gallery-link" href="fullurl/galleries?phpvar=bumps" id="Bumps"><h3>Bumps</h3></a></li>
       <li>    <a class="gallery-link" href="fullurl/galleries?phpvar=newborn" id="Newborn"><h3>Newborn</h3></a></li>
       <li>    <a class="gallery-link" href="fullurl/galleries?phpvar=boys" id="Boys"><h3>Boys</h3></a></li>
       <li>    <a class="gallery-link" href="fullurl/galleries?phpvar=girls" id="Girls"><h3>Girls</h3></a></li>
        <li>   <a class="gallery-link" href="fullurl/galleries?phpvar=siblings" id="Siblings"><h3>Siblings</h3></a></li>
       <li>    <a class="gallery-link" href="fullurl/galleries?phpvar=families"  id="Families"><h3>Families</h3></a></li>
        </ul>

---

但是，只有单击第一个列表项，它才会添加活动类。如何让活动类处理所有链接？

我创建了一个代码段，它可以根据您的需要工作。我已经在必要的地方解释了代码。希望对你有帮助

$（函数（）{
const current=location.href；//获取当前完整url
$（'.gallery link'）。每个（函数（）{//使用类{gallery link}遍历所有元素
让$this=$（this）；//当前元素（以便该元素在范围更改中相同）
如果（$this.attr（'href'）==current）{//检查属性{href}
$this.addClass（'active'）；//如果是，则添加类{active}
}
});
});
.active{
颜色：红色；
}




















您可以从服务器端的会话变量将pageUrl设置为hiddenfield

然后使用jquery.each（）循环匹配当前url并设置活动类，否则将其删除

setActiveMenus();

function setActiveMenus() {

    var getCurUrl = $("#hiddenfieldPageUrl").val();
   
    $("#gallery-list li a").each(function () {
        var self = $(this);
        var selfUrl = self.attr('href');

        if (selfUrl == getCurUrl) {
            self.addClass("active");
           
        } else {
            self.removeClass("active");
        }

    });

}


如果锚定标记上有完整的url可用。
然后下面的代码就可以正常工作了，也就是按类名在锚标记上循环

 var current = location.href ;
$('#gallery-list .gallery-link').each(function() {
    var self = $(this);
    var aURL = self.attr("href");
    if (aURL == current) {
        self.addClass('active');
    } else {
        self.removeClass('active');
    }
});

每个链接都会加载一个新页面，还是有其他代码拦截点击并使用ajax？这不应该起作用，因为href属性是相对的，而
location.href
是绝对的。他在href中写了完整的url，我想他不想透露完整的url。啊，是的，我错过了。但是使用
this.href
的OP方法应该可以很好地工作。一个
元素有一个href属性我猜，它会的。这几乎是一样的，但由于他的标签只是jquery，所以我对其进行了修改。：）当然可以，但是简单地改为使用属性和jQuery并不能解释为什么原始页面不起作用…它应该假设每次链接都加载一个新页面匹配
location.href
有什么问题？这种方法似乎过于复杂，无法解释为什么OP方法不能work@charlietfl：using location.href将提供页面的完整URL，包括协议（如http://）。在这里，html锚定标记只包含查询字符串不是完整url的控制器操作(https://......)OP使用别名“fullurl”以OK进行清理，但OP的
this.href
返回的值与
$（this.attr（'href'）相同
当在href属性中使用绝对url时……因此，所有这些都无法解释操作代码为何无效。href给出绝对URI，其中as$（this）.attr（“href”）给出href属性的确切值，该属性可能是相对URI，也可能不是相对URI。也许op没有设置完整的url，因此代码对他不起作用。因为他正在检查绝对url
 var current = location.href ;
$('#gallery-list .gallery-link').each(function() {
    var self = $(this);
    var aURL = self.attr("href");
    if (aURL == current) {
        self.addClass('active');
    } else {
        self.removeClass('active');
    }
});