私は現在のURLのアクティブなメニュー項目にしたいjQueryの

Question

で現在のURL、今の私のHTMLに基づいて、アクティブメニュー項目の設定：

<ul class="header-tools nav navbar-nav"> 
    <li class="mysetting"> 
     <a class="link-menu-active" href="">first title</a> 
    </li> 
    <li class="mysetting"> 
     <a class="link-menu-active" href="">second title</a> 
    </li> 
    <li class="mysetting"> 
     <a class="link-menu-active" href="">third title</a>          
    </li> 
</ul> 

、それは私のjqueryのコードです：

$(".header-tools.nav.navbar-nav li").each(function() { 
    var navItem = $(this); 
    if($(navItem).find("a").attr("href") == location.href) { 
     navItem.addClass("active"); 
    } 
}); 

またはそれ：

var path = window.location.pathname; 
path = path.replace(/\/$/, ""); 
path = decodeURIComponent(path); 

$(".header-tools.nav.navbar-nav li a").each(function() { 
    var href = $(this).attr('href'); 
    if (path.substring(0, href.length) === href) { 
     $(this).closest('li').addClass('active'); 
    } 
}); 

が、それらのどれも動作しません、私は何をすべきでしょうか？

は、電流経路が一致するか、アンカーのhrefが含まれているのであれば、この正確なユースケースをありがとう

Answer 1

は、あなたがチェックすることができ、それに応じて行動します。

$('.mysetting').each(function() { 
    var path = window.location.pathname, 
     href = $(this).find('a').attr('href'), 
     exactMatch = (path === href), // URL is the same as anchor. Useful when your path can contain the href of multiple links 
     closeMatch = (path.indexOf(href) !== -1); // URL contains anchor. 
                // Useful when you don't know if query strings and other crap will be appended/prepended to your links 

    if (exactMatch /* or closeMatch depending on your preference*/) { 

     $(this).addClass('active'); 
    } 
}) 

すでに上記のコメントで述べたように、けれども、WPは、状況のまさにこのようなものを扱うのナビゲーション機能を内蔵し、より多くの強力なあなたが思い付くことができたJavaScriptの任意の数行よりもしています。