Hinzufügen der aktiven Klasse zur aktuellen Seite in Nav mit jQuery

Ich versuche, die 'aktive' Klasse der aktuellen Seite Nav Link in der Kopfzeile hinzuzufügen. Ich habe Fortschritte gemacht, aber ich stoße auf einen kleinen Käfer und würde mich über Hilfe freuen. Ich weiß, dass die Antwort ziemlich offensichtlich ist, aber ich bin neu in jQuery/Javascript und ich habe Probleme, es alleine zu finden.Hinzufügen der aktiven Klasse zur aktuellen Seite in Nav mit jQuery

Hier ist meine nav HTML-Struktur:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="nav"> 
     <ul class="navbar-nav ml-auto"> 
     <li class="nav-item"> 
      <a href="/" class="nav-link">Me</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="/work">Work</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="/play">Play</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="/contact">Contact</a> 
     </li> 
     </ul> 
</nav>

Einfach genug. Hier ist der jQuery-Code:

$(function() { 
    $('nav li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); 
});

Der Code funktioniert auf inneren Seiten, aber ich bin in ein Problem laufen, wobei auf der Homepage (‚Me‘, href = „/“), wird der Code der Zugabe aktive Klasse für alle Nav-Links.

Ich denke, das Problem wäre gelöst, wenn ich href = "/ work /" (fügte ein/bis zum Ende aller Links), aber wenn ich das tun, funktionieren die Links nicht mehr, weil die Website dann versucht, zu www.sitename.com/work/.php zu gehen.

Dies ist entweder eine einfache .htaccess oder jQuery-Fix, aber ich bin mir nicht sicher, welche, oder wie Sie es implementieren.

Danke!

Quelle

2017-11-04 Kyle Michel

Was verwenden Sie für Ihr Backend? Es könnte einfacher sein, die Klasse beim Laden der Seite aus dem Backend hinzuzufügen. –

Nicht sicher, warum Sie dachten, dies könnte ein '.htaccess' Fix sein? – MrWhite

Das passiert, weil Sie den^= Selektor verwenden. Das bedeutet 'startWith', also da alle URLs mit '/' beginnen, wird die 'aktive' Klasse allen hinzugefügt.

Ersetzen Sie es durch den gleichen Selektor und es sollte funktionieren.

$('nav li a[href="/' + location.pathname.split("/")[1] + '"]').addClass('active');

Quelle

2017-11-04 21:56:45

perfekte Lösung. Danke! –

Ich würde eine +1 schätzen, wenn es Ihnen hilft: P –

"Vielen Dank für das Feedback! Stimmen von denen mit weniger als 15 Reputation werden aufgezeichnet, aber nicht die öffentlich angezeigte Post Punktzahl ändern." –

Ein einfacher Ansatz, um die URL href Eigenschaft Link zu Seite

$('nav li a').filter(function(){ 
    return this.href === location.href; 
}).addClass('active');

Obwohl das href Attribut enthält nur einen Weg, die href Eigenschaft im DOM enthält die vollständige URL ist Vergleichen

Quelle

2017-11-04 22:00:08 charlietfl

'location.href' gibt die volle URL zurück, zum Beispiel' https: // stackoverflow.com/fragen', aber er braucht die relative URL '/ questions' .... – kip

@kip lese meinen Kommentar am Ende der Antwort. Kann es direkt auf dieser Seite mit 'console.log ($ ('# nav-questions'). Prop ('href'))' beweisen. Der Link * Fragen * oben hat nur eine relative URL im Attribut – charlietfl

Hinzufügen der aktiven Klasse zur aktuellen Seite in Nav mit jQuery

Antwort

Verwandte Themen