Добавить активное меню или класс навигации на основе URL

Question

Я добавил класс active в мои пункты меню. Однако моя текущая реализация добавляет класс к всем пунктам меню списка , в отличие от текущей страницы .

Пожалуйста, дайте мне знать, если есть проблема с мой текущий код и что я могу сделать для достижения желаемого результата.

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

Answer 1

Ладно, попробуй вот так, надеюсь, это сработает

<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>

Answer 2

Пожалуйста, проверьте URL, все ссылки "/ collection"