javascriptを使用したナビゲーションのアクティブなリンク

Question

私のサイトのナビゲーションに現在のページのアクティブなリンクを設定する方法がわかりません。

これは私のために働く唯一のコードですが、常に「アクティブ」というクラスに2つのリンクがあります。私は現在のページをアクティブにしたいだけです。任意の助けhttp://champhero.wpengine.com

ありがとう：

<script> 
function setActive() { 
aObj = document.getElementById('nav').getElementsByTagName('a'); 
for(i=0;i<aObj.length;i++) { 
if(document.location.href.indexOf(aObj[i].href)>=0) { 
    aObj[i].className='active'; 
    } 
} 
} 

window.onload = setActive; 
</script> 

はここに私のステージングサイトです：

は、ここに私のコードです！

Answer 1

あなたはindexOfのをチェックしています。そのため、URL http://champhero.wpengine.com/は常にあなただけの平等を確認した場合、それが動作するはずhttp://champhero.wpengine.com/the-enemies/

のような他の人に含まれています。

function setActive() { 
    var aObj = document.getElementById('nav').getElementsByTagName('a'); 
    for (var i = 0; i < aObj.length; i++) { 
     if (document.location.href == aObj[i].href) { 
      aObj[i].className = 'active'; 
     } 
    } 
} 

注：あなたは、「VAR」でローカル変数を宣言し、それらをグローバルを作っていませんでした潜在的に環境全体で不安定です。私はそれを私の提案したコードで変更しました。

Answer 2

aタグhrefにはリンク全体が含まれているため、以下のように同等かどうかを確認できます。

<script> 
    function setActive() { 
    aObj = document.getElementById('nav').getElementsByTagName('a'); 
    for(i=0;i<aObj.length;i++) { 
     if(document.location.href === aObj[i].href) { 
     aObj[i].className='active'; 
     } 
    } 
    } 

    window.onload = setActive; 
</script> 

このスニペットは、すべてのアンカーにクラスを適用しますけれども、それは他のすべてのリンク（http://champhero.wpengine.com/pagelink）に

Answer 3

<script> 
window.onload = function(){ 
    var anchors = document.getElementsByTagName('a'); 
    for (var i = 0; i < anchors.length; ++i) 
     if (anchors[i].href === window.location.href) 
      anchors[i].className += ' active'; 
}; 
</script> 

存在だからホームページのナビゲーションリンク（http://champhero.wpengine.com/）は、すべてのページで強調表示されます。あなたのナビゲーションバー、たとえば、中だけのものについては、にフックする彼らに特定のCSSクラスを与え、その後：

<script> 
window.onload = function(){ 
    var nav_links = document.querySelectorAll('.nav-link'); 
    for (var i = 0; i < nav_links.length; ++i) 
     if (nav_links[i].href === window.location.href) 
      nav_links[i].className += ' active'; 
}; 
</script>