使用分页时，在图库导航上保持活动类

Question

我在我的网站的图库页面上有以下导航，允许用户按类别过滤图像。

<ul>
<li><a href="/gallery/" class="active">All</a></li>
<li><a href="/gallery/our-gym/">Our Gym</a></li>
<li><a href="/gallery/our-classes/">Our Classes</a></li>
<li><a href="/gallery/our-coaches/">Our Coaches</a></li>
</ul>

我添加了下面的代码片段来添加类'active'，即用户当前正在查看的类别。

<script>
jQuery(function($) {
var path = window.location.href;
$('.gallery_listing_wrapper li a').each(function() {
if (this.href === path) {
$(this).addClass('active');
}
});
});
</script>

这适用于上面的图库导航，但是一旦我使用分页导航，它就不起作用了。

分页的URL与图库及其分类略有不同。

例如-而不是/gallery/our-gym/- page/，并且将页码添加到URL中，即/gallery/page/2/

是否有可能调整上面的代码片段以在使用分页时保持活动类为All ?

Answer 1

你可以直接将类添加到"All">

<script>
jQuery(function($) {
var path = window.location.href;
let match = $(`.gallery_listing_wrapper li a[href="${path}"]`);
if(match.length >= 1)
match.addClass("active");
else
$(".gallery_listing_wrapper li a[href='/gallery/']").addClass("active");
});
</script>