Add active Menu or Navigation class based on URL

Question

I've added an active class to my menu items. However my current implementation is adding the class to all list menu items as opposed to whatever the current page is.

Please let me know if there is an issue with my current code, and what I can do to achieve the desired outcome.

<ul id="menu_items">
 <li class="has-sub"><a href="/collections">STORE</a></li>
 <li><a href="/collections">RESEARCH</a></li>
 <li><a href="/collections">INFO</a></li>
</ul>

$(function(){
        var current = location.pathname;
        $('#menu_items 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');
            }
        })
    })

.active {text-decoration:underline;}

tapu74 · Accepted Answer · 2020-04-14 11:02:43Z

1

Okay, Try this way, hope it will work

<ul id="menu_items">
<li><a href="#index">Index</a></li>
 <li class="has-sub"><a href="#store">STORE</a></li>
 <li><a href="#research">RESEARCH</a></li>
 <li><a href="#info">INFO</a></li>
</ul>
</html>

<Script>
 $("#menu_items li").bind("click", function(e){

 $("li").click(function() {
        $(this).siblings().find("a").removeClass("active");
        $(this).find("a").addClass("active")
    })
 })

</Script>

answered Apr 14, 2020 at 11:02

tapu74

1,21111 silver badges14 bronze badges

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

Comments

tapu74 · Accepted Answer · 2020-04-13 18:35:25Z

0

Please Check the URLs , All the Links are "/collections"

answered Apr 13, 2020 at 18:35

tapu74

1,21111 silver badges14 bronze badges

1 Comment

JordanMiguel Over a year ago

This helps, however now all links have the active class when I am at the index page

Collectives™ on Stack Overflow

Add active Menu or Navigation class based on URL

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related