将活动类添加到目录

Question

I'm trying to use jQuery to add an .active class to my Bootstrap navigation links. I'm using some simple code I found elsewhere but have had to modify it.

I want the .active class to be added to the relevant .nav-link when on any page in the relevant directory, eg to be added to the Photography link in the nav bar whether a user is on the /photography page or /photography/fashion page.

This is what I have so far;

$(document).ready(function() {
var urlFull = window.location.pathname.split( '/' );
var urlFirst = '/' + urlFull[1];

$('.navbar-nav .nav-link').each(function() {
    if (this.href === urlFirst) {
        $(this).addClass('active');
    }
});
});

I'm pretty sure my issue is to do with the if statement, but I'm pretty new to Javascript and I can't see the problem! I've used console.log to check my variables and they correspond with the links set in the navigation.

Any help would be very much appreciated.

Answer 1

Answering my own question...

It looks like my issue was with this.href when it should have been this.pathname . It seems to be working correctly now, but time will tell when I've built more pages!