Active navigation class based on current URL problem

Question

I have the following HTML menu:

<div class="nav">
            <ul>
                <li class="first"><a href="/">Home</a></li>
                <li><a href="/something/">Something</a></li>
                <li><a href="/else/">Else</a></li>
                <li class="last"><a href="/random/">Random</a></li>
            </ul>
            <ul style="float:right;">   
                <li class="first last"><a href="/news/">News</a></li>
            </ul>
        </div>
    </div>

And then I have this code:

jQuery(function($){
    var current = location.pathname;
    $('.nav ul 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('active');
        }
    })
})

The code is working great, but it has a problem. For example, if I see the Home page (www.example.com) then all of the menu links receives the active class. Another problem would be that it works great for www.example.com/something but it doesn't keep it active if I go to www.example.com/something/1 etc. Any idea how to fix this? Thanks in advance!

Answer 1

Use the below jQuery code to add active class:

$(function() {
      var pgurl = window.location.href.substr(window.location.href
         .lastIndexOf("/") + 1);
      $(".nav ul li a").each(function() {
         if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
            $(this).addClass("active");
      })
   });

Answer 2

For home page add extra class 'default' in list like.

<li class="first default"><a href="/">Home</a></li>

jquery code.

 jQuery(function($){
        var current = location.pathname;
        console.log(current);
        //remove the active class from list item. 
        $('.nav ul li a').removeClass('active');

        if(current != '/'){
            $('.nav ul li a').each(function(){
                var $this = $(this);
                // if the current path is like this link, make it active
                if(current.indexOf($this.attr('href')) !== -1 && $this.attr('href') != '/'){
                    $this.addClass('active');
                }
            })
        }else{
             console.log('home');
            $('.default a').addClass('active');
        }
    })

Answer 3

By using indexOf(), you are checking if the link's target is the same the current location.

What you want is not "the same URL" but "the same pattern", so I would tend to use a regular expression :

let re = new RegExp("^" + $(this).attr("href") + ".*");
if (re.test($current)) {
    $(this).addClass("active");
}

Note that this would force you to create a separate solution for your link to the main page, else it would always be active.