URL without www.domain.com/subpage makes every header link start active

Question

I had to give my links an active state and used a code that gets the second part of the url and searches for the nav li a element with an href equal to the second part of the url.

When I go to my site the first like U will be is www.domain.com without any /index.php or /contact-us.php. This is a problem since the second part of my url will be empty and tell all my a elements to be active.

When I press on 1 of the header links everything works fine. This is the site I'm talking about, see it yourself if you want ☺.

Code:

 $(function () {
        var current = location.pathname;
        //Here
        $('nav li a').each(function () {
            var $this = $(this);
            // if the current path is like this link, make it active
            if ($this.attr('href').indexOf(current) !== -1) {
                $this.addClass('selected');
        }
    })
});

I found this code from this stackoverflow question.

I tried adding the underneath code on the //Here spot of above code:

if ($this.attr('href') ===  window.location.href){
    $this.attr('href', window.location.href + "/index.php"');
}

But as you can see I'm not an expert in coding (yet ☺ ) so I couldn't get this to work. Could someone help me with this or guide me in the right direction?

@HamzaAbdaoui thanks for the quick answer, I added the code to `$this.attr('href').indexOf(current) !== -1 && current !== 'www.domain.nl'` but it didn't work. I tried `domain.nl/` and `domain.nl` but both didn't work. — Jeremy, Jan 30 '18 at 10:37
@HamzaAbdaoui I alerted the `current` and it gave me just `/` so I changed it to `current !== '/'` and it works now :D Thanks for your help. — Jeremy, Jan 30 '18 at 10:50

Hamza Abdaoui · Accepted Answer · 2018-01-30T10:54:34.120

You are so close to achieve what you want, but you are missing a test:

location.pathname will return only the path after the main URL, means when our URL is www.domain.com/pageX.php, the result of location.pathname would be /pageX.php.

So, when we are on the homepage, our URL is just www.domain.com/, the pathname would be just /.

$(function () {
    var current = location.pathname;
    //Here
    $('nav li a').each(function () {
        var $this = $(this);
        // if the current path is like this link, make it active
        if(current != "/"){ //<== Means we are not in the homepage, current is /pageX...
          if ($this.attr('href').indexOf(current) !== -1) {
              $this.addClass('selected');
          }
        }else{
          if ($this.attr('href').indexOf('index.php') !== -1) {
              $this.addClass('selected');
          }
        }
    })
});

Oh you just did this while I found out. But thanks couldn't do this without your help! — Jeremy, Jan 30 '18 at 10:51
Btw do you know a way to select the `a` element with the `href = 'index.php'` to make it start selected if `current = '/'`? — Jeremy, Jan 30 '18 at 10:52

URL without www.domain.com/subpage makes every header link start active

1 Answers1