Aktive Navigationsklasse basierend auf der URL hinzufügen

Idealerweise geben Sie diese Klasse serverseitig aus, aber wenn das nicht möglich ist…

Nehmen wir an, Sie haben eine Navigation wie diese

<nav>
	<ul>
		<li><a href="/">Home</a></li>
		<li><a href="/about/">About</a></li>
		<li><a href="/clients/">Clients</a></li>
		<li><a href="/contact/">Contact Us</a></li>
	</ul>
</nav>

Und Sie befinden sich unter der URL

http://ihre-seite.de/about/team/

Und Sie möchten, dass der Link "About" eine Klasse "active" erhält, um visuell anzuzeigen, dass es sich um die aktive Navigation handelt.

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

Im Wesentlichen werden dadurch Links in der Navigation abgeglichen, deren href-Attribut mit "/about" beginnt (oder was auch immer das sekundäre Verzeichnis ist).

Kommentare

Mike

# 17. Juli 2012

Ich habe damit zu kämpfen, etwas Ähnliches für eine HTML-Website mit Vorlagen (serverseitige CSS-Aktualisierung nicht verfügbar) zum Laufen zu bringen. Die Struktur des Menüs ist etwas komplexer als in Ihrem Beispiel. Würde Ihr CSS-Trick für diese Struktur funktionieren? Wenn ja, bitte erleuchten Sie mich, denn ich stecke fest.

Antworten

Taufik Nurrohman

# 18. Juli 2012

Pure JavaScript

<nav id="nav">
    ...
</nav>

(function() {
    var nav = document.getElementById('nav'),
        anchor = nav.getElementsByTagName('a'),
        current = window.location.pathname.split('/')[1];
        for (var i = 0; i < anchor.length; i++) {
        if(anchor[i].href == current) {
            anchor[i].className = "active";
        }
    }
})();

Antworten

Andrés B

# 4. März 2020

cool!!!

Eine andere Möglichkeit

function setNavigation() {
    let current_location = location.pathname.split('/')[1];
    if (current_location === "") return;
    let menu_items = document.querySelector("header").getElementsByTagName("a");
    for (let i = 0, len = menu_items.length; i < len; i++) {
      if (menu_items[i].getAttribute("href").indexOf(current_location) !== -1) {
        menu_items[i].className = "active";
      }
    }
  }
  setNavigation()

Rogerio Lucas

# 2. Juni 2022

Dies ist die korrekte, alternative Version basierend auf der inneren Text-URL

function setNavigation() {
let current_location = location.pathname.split(‘/’)[1]
if (current_location == ”) {
current_location = ‘home’
}

let menu_items = document
  .querySelector('header')
  .getElementsByClassName('navbar-menu')[0]
  .getElementsByTagName('li')

for (let i = 0, len = menu_items.length; i &lt; len; i++) {
  if (
    menu_items[i].getElementsByTagName(&#039;a&#039;)[0].innerText.toLowerCase() ===
    current_location
  ) {
    menu_items[i].className = &#039;is-active&#039;
  }
}

}
setNavigation()

mehdi

# 5. September 2012

Danke für alles

Antworten

Mark Johnson

# 12. Februar 2013

Danke Chris! Einfach, klar und schick. High five!

Antworten

Leon Gaban

# 7. März 2013

Danke! Habe schon länger nach so etwas gesucht :)

Antworten

Don

# 6. April 2013

Funktioniert einwandfrei, mit einer Ausnahme. Auf der Startseite wird die Klasse zu allen Links hinzugefügt. Sie beginnen alle mit /. Jede Hilfe wäre willkommen.

Antworten

Don

Permalink zum Kommentar# 21. Juli 2013

Einfache Lösung: Verwenden Sie das Skript nicht auf der Startseitendatei. Idiot. :)
Michel

Permalink zum Kommentar# 6. März 2014

Versuchen Sie, hrefˆ= durch href$= zu ersetzen

ˆ= Wert beginnt mit
$= Wert endet mit
Peter

Permalink zum Kommentar# 17. Oktober 2014

Das habe ich getan, um die "Home"-Seite oder "Index" zu berücksichtigen.
if (location.pathname !== '/') { $("a[href*='" + location.pathname + "']").addClass("current"); } else { var home = document.getElementById("home").getElementsByTagName('a')[0]; home.className = 'current'; }

Hoffe, das hilft.
Justin

Permalink zum Kommentar# 15. Dezember 2015
Ich habe kein "/" in meiner Navigation, also fügte der Code "active" zu allen meinen Links auf der Startseite hinzu. In meinem Fall habe ich Folgendes getan, damit mein "/" Pfad den Code nicht ausführt
```
$(function() {
    if ((location.pathname.split("/")[1]) !== ""){
        $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
    }
});
```

bgdbraba

# 13. Mai 2013

In der Tat. Außerdem sind Seiten, die zum Beispiel /about und /aboutsome genannt werden, beide 'active', wenn man auf 'about' klickt. Gibt es dafür eine Lösung, wie eine Art exakte Übereinstimmung?

Antworten

John

# 29. September 2013

Hallo,

Ich konnte den obigen Selektor nicht zum Laufen bringen, habe aber stattdessen diese (PHP-spezifische Lösung) verwendet, um die aktuelle URL abzugleichen.

Ich hoffe, das hilft jemandem (noch nicht gründlich getestet, könnte also Einschränkungen/unerwartete Ergebnisse haben).

$(‘nav a[href=””]’).addClass(‘active’);

Antworten

John

Permalink zum Kommentar# 29. September 2013

Mein Kommentar oben hat PHP gestrippt, daher werde ich ihn anpassen, und Sie müssen beim Verwenden gesunden Menschenverstand walten lassen.
$('nav a[href="<?php echo "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ? >"]').addClass('active');

mlotfi

# 18. Dezember 2013

Hallo,
Ich bin hier neu, können Sie bitte ein funktionierendes Beispiel zur Verfügung stellen?
Danke.

Antworten

Luke Etheridge

# 3. Januar 2014

Hallo Leute – weiß jemand, wie das mit der absoluten URL (ganze URL) möglich ist?

Ich bin sicher, dass dies eine einfache Sache ist, aber ich weiß nicht wirklich, wo ich mit dem Code anfangen soll...

Vielen Dank,
Luke

Antworten

ArtyPea

# 12. November 2015

$(function() {
    var nav = document.getElementById("sticky"),
        anchor = nav.getElementsByTagName("a"),
        current = window.location;

    console.log("anchor = ",anchor,"current = ",current);

    for (var i = 0; i < anchor.length; i++) {
    if(anchor[i].href == current) {
        anchor[i].className = "active";

    }

}
});

Ramesh Chowdarapally

# 13. Februar 2014

Chris, können Sie eine kleine Demo dafür bereitstellen?

Antworten

Ashok

# 5. März 2014

Ja, das ist nützlich…..

Antworten

Brian

# 24. März 2014

Zwei schnelle Fragen

Wenn meine URL dynamisch ist, wie soll ich den Ankerteil des JavaScript anpassen?
Gibt es eine reine CSS-Methode für den oben gezeigten aktiven Zustand? Ich frage nur so. Ich würde den Hover-Effekt für Nicht-JS-Betrachter verwenden, falls jemand das wissen möchte.

Antworten

Wesley

# 27. Juni 2014

Meine Situation ist ähnlich, aber anders. Ich muss ein bestimmtes Nav-Element mit der aktiven Klasse ansprechen, wenn ein Nicht-Kind-Dokument aktiv ist. Irgendwelche Ideen, wie man das macht?

Antworten

Vita

# 3. November 2014

Ich habe einen etwas anderen Ansatz implementiert. Ich versuche, die beste Übereinstimmung für die URL und den aktuellen Standort zu finden. Ich habe ein jQuery-Plugin dafür erstellt: https://github.com/Vitaa/ActiveNavigation

Antworten

Anthony Candaele

Permalink zum Kommentar# 27. März 2017

funktioniert einwandfrei. Vielen Dank!

Kenneth Hodges

# 12. Juli 2017

Hallo!

Ich habe eine Routine gefunden, um die aktive (aktuelle) Klasse auf meinem gemeinsam genutzten Menü zu setzen, aber ich muss sie so modifizieren, dass sie nur auf den übergeordneten Link gesetzt wird und nicht auf den "nächsten" Link. Sie funktioniert gut bei Menüpunkten ohne Untermenüs, aber wenn ein Untermenüpunkt angeklickt wird, gibt es nach dem Seitenaufruf keine Anzeige im Hauptmenü. (Der Code, den ich ändern muss, ist unten aufgeführt)

(function( $ ) {
    $.fn.activeNavigation = function(selector) {
        var pathname = window.location.pathname
        var extension_position;
        var href;
        var hrefs = []
        $(selector).find("a").each(function(){
            // Remove href file extension
            extension_position = $(this).attr("href").lastIndexOf('.');
            href = (extension_position >= 0) ? $(this).attr("href").substr(0, extension_position) : $(this).attr("href");

<code>        if (pathname.indexOf(href) > -1) {
            hrefs.push($(this));
        }
    })
    if (hrefs.length) {
        hrefs.sort(function(a,b){
            return b.attr("href").length - a.attr("href").length
        })
      hrefs[0].closest('li').addClass("current")
    }
}; })(jQuery);

Jonno

# 9. Juli 2015

Können Sie zeigen, wie man das in PHP macht?

Antworten

George v

# 7. September 2015

TKX
Vita

Antworten

barrett fullerton

# 9. Februar 2016

Kurzes Update, ich weiß nicht, ob es schon gesagt wurde, aber wenn Sie dies verwenden möchten und auch einen Home-Link als "/" beibehalten möchten

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

Machen Sie einfach etwas, um Ihre Home-li oder ein Tag zu unterscheiden, wie im else.

Antworten

Lukas

Permalink zum Kommentar# 29. April 2016

Vielen Dank für das Teilen! Hat mir sehr geholfen ;)

Alio

# 6. Juni 2016

Großer Respekt! Hat mir sehr geholfen!

Antworten

Esen

# 19. Dezember 2016

Ich habe diese Lösung mit reinem JS und habe ein Problem. Der Hash (#) in der URL ändert sich langsamer als die aktiven Klassen. Also klicke ich auf den ersten Link und nichts passiert, dann klicke ich auf den zweiten und der erste bekommt die aktive Klasse.

<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
        console.log("Oh, Hello.");

        //Preselect all the links 
        var links =  document.querySelectorAll('.nav-class-link');

        // Connect the links event-click with the event handler
        for (var i = links.length - 1; i >= 0; i--) {
            links[i].addEventListener('click', updateLinksActiveState);
        }

        //Event Handler
        function updateLinksActiveState(){  
            //Check for the active one
            for (var i = links.length - 1; i >= 0; i--) {
                if(links[i].href.split("#")[1] == location.hash.split("#")[1]){
                    links[i].classList.add('active');
                }else{
                    links[i].classList.remove('active');
                }
            }
        }
    });
    </script>

Antworten

neeta

# 22. März 2017

Hallo,

Ich habe eine umgekehrte Situation.

Was, wenn ich nicht möchte, dass das übergeordnete Menü hervorgehoben wird, wenn sein Kind (Untermenüpunkt) aktiv ist?

Z.B.

Über uns – Keine Farbe
– Link 1
– Link 2 (Aktuell aktiv): soll farbig sein

Irgendwelche Ideen?

Vielen Dank

Antworten

Aryan Malik

# 19. November 2017

Hey, probier mal diesen hier.

$(function() {
  var url = location.origin + location.pathname;
  $('nav a[href^="' + url + '"]')
    .css({
        'background': '#fff',
        'color' : '#c02f2f'
      });
});

Aryan Malik

# 19. November 2017

Hey, ich habe dieses Stück Code ausprobiert und es funktioniert großartig für mich…

$(function() {
  var url = location.origin + location.pathname;
  $('nav a[href^="' + url + '"]')
    .closest('li')
    .addClass('active');
});

Antworten

Bekzat Sadykov

Permalink zum Kommentar# 8. Dezember 2017

Danke Aryan. Dein Code funktioniert sehr gut für mich.

Huy

# 7. Dezember 2017

Es hat funktioniert!! Danke für deinen Beitrag.

Antworten

Luis

# 12. Januar 2018

Toller Beitrag und Tipp. Ich hinterlasse hier meinen Beitrag. Für diejenigen, die Probleme mit der Übereinstimmung von URLs mit Parametern haben, hier ist die Lösung (der Code fügt die KLASSE zum übergeordneten LI-Tag hinzu und nicht zum A-Tag wie im ursprünglichen Beitrag)

$(function() {
var url = window.location.href; url = url.replace(/^.*\/\/[^\/]+/, ”);
$(‘nav a[href$=”‘ + url + ‘”]’).closest(‘li’).addClass(‘active’);
});

Antworten

Thierry

# 1. Februar 2019

eine kürzere Syntax (in diesem Fall wende ich die aktive Klasse auf li an, nicht auf a)

let loc = location.pathname.split(“/”)[1];

document.querySelector(‘nav a[href^=”/’ + loc + ‘”]’).closest(‘li’).classList.add(‘active’);

Antworten

Greg Raven

# 6. Dezember 2020

Oder man könnte etwas Ähnliches tun

<nav>
    <a href="/index.html" id="homepage">Home</a>
    <a href="/about.html" id="about">About</a>
    <a href="/clients/index.html" id="clients">Clients</a>
    <a href="/contact/index.html" id="contact">Contact Us</a>
</nav>

<script>
    switch (!0) {
      case /about/.test(window.location.pathname):
        document.getElementById("about").classList.add("active");
        break;
      case /clients/.test(window.location.pathname):
        document.getElementById("clients").classList.add("active");
        break;
      case /contact/.test(window.location.pathname):
        document.getElementById("contact").classList.add("active");
        break;
      default:
        document.getElementById("homepage").classList.add("active");
    }
</script>

Antworten

Dayle Senior

# 22. April 2021

Hallo Chris,
Ich habe ein Menü, bei dem alle Links eindeutige Domainnamen sind. Ich verwende eine ähnliche Methode wie Ihre, die großartig funktioniert

jQuery(function($) {
    var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
    $('.nav a').each(function() {
        if (this.href === path) {
            $(this).addClass('current-link');
        }
    });
});

Aber mein Problem ist, dass dies funktioniert, wenn die Adressleiste = http://www.mysite.com ist, aber nicht funktioniert, wenn die Adressleiste = mysite.com/cat/ ist, zum Beispiel.

Ich möchte, dass meine Methode nur den Domainnamen liest und alles danach ignoriert.

Irgendwelche Ideen?

Antworten

haseeb

# 10. Januar 2023

jQuery(document).ready(function($){
// Aktuellen Pfad abrufen und Ziel-Link finden
var path = window.location.pathname.split(“/”).pop();

// Startseite mit leerem Pfad berücksichtigen
if ( path == ” ) {
path = ‘index.php’;
}

var target = $(‘nav a[href=”‘+path+'”]’);
// Aktive Klasse zum Ziel-Link hinzufügen
target.addClass(‘active’);

});

Antworten

Kommentare

Eine Antwort hinterlassen Antwort abbrechen