Active Link auf Navigation mit Javascript

Question

Ich kann nicht scheinen, herauszufinden, wie meine Website Navigation einen aktiven Link für die aktuelle Seite haben.

Dies ist der einzige Code, der für mich funktioniert, jedoch gibt es immer zwei Links mit der Klasse "aktiv". Ich möchte nur, dass die aktuelle Seite aktiv ist.

Hier ist mein Code:

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

Hier meine Inszenierung Website ist: http://champhero.wpengine.com

Vielen Dank für jede Hilfe!

Answer 1

Du bist gerade einen indexOf. Daher URL http://champhero.wpengine.com/ ist immer in anderen enthalten wie http://champhero.wpengine.com/the-enemies/

Wenn Sie nur eine Gleichheit überprüfen, sollte es funktionieren:

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

Hinweis: Sie wurden nicht auf lokale Variablen mit ‚var‘ erklärt, sie Globals zu machen und potenziell instabil in der Umgebung. Ich habe das in meinem vorgeschlagenen Code geändert.

Answer 2

a tag href enthält den gesamten Link, so dass Sie auf Gleichheit wie unten überprüfen können.

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

Startseite nav Link (http://champhero.wpengine.com/) wird auf jeder Seite hervorgehoben, da es in allen anderen Links vorhanden ist (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> 

obwohl dieser Ausschnitt wird die Klasse für alle Anker gelten. Für nur die, die in, sagen wir, Ihre Navigationsleiste, geben ihnen eine bestimmte CSS-Klasse in einzuhaken und dann:

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