Aktuelle URL im Menü mit jquery hervorheben

Question

Ich habe ein Menü, aber ich möchte den aktuellen Link mit Jquery hervorheben.

var loc = window.location;
   var lochref = $("#topNavigation li a").attr("href");

   if(lochref == loc){
       $('#topNavigation li a').addClass('currenthover');
   }

Mit dem obigen Skript gibt es keine Änderung in der Klasse "a". Wie kann ich dies mit Jquery tun? Vielen Dank im Voraus

Answer 1

Zunächst einmal: Dies ist etwas, das Sie serverseitig tun sollten. Es ist viel, viel, viel einfacher und zuverlässiger.

Ihr Code vergleicht nur die href des ersten Links, da attr gibt den Eigenschaftswert des ersten Links zurück. Sie müssen eine Schleife über die Links ziehen, um den richtigen zu finden.

var loc = window.location.href;
$("#topNavigation li a").each(function() {
  if(this.href == loc) {
     $(this).addClass('currenthover');
  }
});

Answer 2

Ich würde entweder loc und lochref in der Konsole protokollieren oder eine Warnung ausgeben, um zu sehen, was die Werte sind, es könnte so einfach sein wie ein fehlender hinterer Schrägstrich. Abgesehen davon ist der Code gültig.

http://jsfiddle.net/loktar/gjZVK/3/

Hit Run und die 2. Ausschreibung sollten übereinstimmen, und der Link wird rot.

Answer 3

Ich habe immer jQuery verwendet, um den aktuellen Menüpunkt hervorzuheben. Versuchen Sie dies:

$(function () {
    var loc = window.location;
    var pathName = loc.pathname.substring(loc.pathname.lastIndexOf('/') + 1);
    $('[href$="' + pathName+ '"]').parent().addClass("active");
});

Answer 4

Sie haben verpasst .href von der window.location Objekt. Sie müssen die erste Zeile ändern in:

var loc = window.location.href