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!

Shivendra Singh · Accepted Answer · 2019-06-09 03:30:05Z

1

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');
        }
    })

edited Jun 9, 2019 at 3:30

answered Jun 9, 2019 at 2:32

Shivendra Singh

2,9731 gold badge13 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Jacob K. Over a year ago

Thanks, but it doesn't work. The Home page is activated but the other ones are not being recognised.

Shivendra Singh Over a year ago

remove the end slash from list item. like - <li><a href="/something">Something</a></li>

Jacob K. Over a year ago

I can give you TeamViewer. The Home tab is staying on while the rest of them are being on, off. EDIT #1: I removed the end slash, still nothing.

Shivendra Singh Over a year ago

for www.example.com/something current path will be '/something' but in list item you are using /something/. batter to remove end slash and check.

Shivendra Singh Over a year ago

because in last item you are also using the class 'first'.

|

mageDev0688 · Accepted Answer · 2019-06-09 02:20:12Z

0

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");
      })
   });

answered Jun 9, 2019 at 2:20

mageDev0688

5664 silver badges27 bronze badges

1 Comment

Jacob K. Over a year ago

Thanks for your answer, but it doesn't seems to work.

AGA · Accepted Answer · 2019-06-09 02:35:03Z

0

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.

answered Jun 9, 2019 at 2:35

AGA

809 bronze badges

Collectives™ on Stack Overflow

Active navigation class based on current URL problem

3 Answers 3

10 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related