`-Tags oder im `
` mit dem Attribut `defer`, um sicherzustellen, dass das HTML vollständig geladen ist, bevor das Skript versucht, auf die Elemente zuzugreifen.„`javascript
document.addEventListener(‘DOMContentLoaded’, function() {
const currentPath = window.location.pathname; // Pfad der aktuellen Seite
const navLinks = document.querySelectorAll(‘#main-nav li a’); // Alle Navigationslinks
navLinks.forEach(link => {
const linkPath = new URL(link.href).pathname; // Pfad des Navigationslinks
// Spezialfall: index.html und die Root-URL ‘/’
if (currentPath === ‘/’ && linkPath.includes(‘index.html’)) {
link.classList.add(‘active’);
}
// Genereller Fall: Pfade stimmen überein
else if (currentPath === linkPath) {
link.classList.add(‘active’);
}
});
});
„`
**Erläuterung des JavaScript-Codes:**
1. `document.addEventListener(‘DOMContentLoaded’, function() { … });`: Dieser Event Listener stellt sicher, dass unser Skript erst ausgeführt wird, wenn das gesamte HTML-Dokument geladen und geparst wurde. Dies verhindert Fehler, falls das Skript versucht, auf Elemente zuzugreifen, die noch nicht im DOM vorhanden sind.
2. `const currentPath = window.location.pathname;`: `window.location.pathname` gibt uns den Pfad der aktuellen URL zurück (z.B. `/ueber-uns.html` oder `/`). Dies ist robuster als `window.location.href`, da es die Domain, Protokoll und Query-Parameter ignoriert.
3. `const navLinks = document.querySelectorAll(‘#main-nav li a’);`: Wir wählen alle ``-Elemente aus, die sich innerhalb eines `
4. `navLinks.forEach(link => { … });`: Wir iterieren über jeden gefundenen Navigationslink.
5. `const linkPath = new URL(link.href).pathname;`: Um sicherzustellen, dass wir den Pfad des Navigationslinks korrekt vergleichen, erstellen wir ein `URL`-Objekt aus dem `href`-Attribut des Links und extrahieren dessen `pathname`. Dies ist wichtig, da `link.href` die vollständige URL enthalten kann (z.B. `http://www.ihredomain.de/ueber-uns.html`), während `currentPath` nur den Pfad enthält. Das `URL`-Objekt hilft, die Pfade konsistent zu vergleichen.
6. **Spezialfall `index.html` und Root-URL `/`**: Viele Server leiten `ihredomain.de/` automatisch auf `ihredomain.de/index.html` um. Unser JavaScript muss damit umgehen können.
* Wenn `currentPath` `/` ist (die Startseite) UND der `linkPath` `index.html` enthält, markieren wir diesen Link als aktiv.
* `linkPath.includes(‘index.html’)` ist hier eine einfache, aber effektive Prüfung, die auch funktioniert, wenn der Link `/index.html` lautet.
7. `else if (currentPath === linkPath) { link.classList.add(‘active’); }`: Wenn die Pfade der aktuellen Seite und des Navigationslinks exakt übereinstimmen, fügen wir dem Link die Klasse `active` hinzu. `classList.add()` ist die moderne und bevorzugte Methode, um Klassen zu DOM-Elementen hinzuzufügen.
### Erweiterungen und Fortgeschrittene Techniken
Das obige Skript deckt die meisten Standardfälle ab. Aber was, wenn Ihre URL-Struktur komplexer ist oder Sie Unterseiten haben?
#### 1. Umgang mit Unterverzeichnissen und Basispfaden
Angenommen, Sie haben eine Navigationsstruktur wie diese:
* Startseite (`/index.html`)
* Blog (`/blog/index.html` oder einfach `/blog/`)
* Blogpost 1 (`/blog/erster-post.html`)
* Blogpost 2 (`/blog/zweiter-post.html`)
* Kontakt (`/kontakt.html`)
Wenn ein Nutzer auf `/blog/erster-post.html` ist, möchten Sie vielleicht, dass der Navigationspunkt „Blog” aktiv ist. Hierfür können wir eine präzisere Pfadprüfung verwenden:
„`javascript
document.addEventListener(‘DOMContentLoaded’, function() {
const currentPath = window.location.pathname.replace(//$/, „”); // Entferne den abschließenden Schrägstrich
const navLinks = document.querySelectorAll(‘#main-nav li a’);
navLinks.forEach(link => {
let linkPath = new URL(link.href).pathname.replace(//$/, „”); // Entferne den abschließenden Schrägstrich
// Handle index.html and root path special cases
if (currentPath === ” || currentPath === ‘/index.html’) { // Current page is root or index.html
if (linkPath === ” || linkPath === ‘/index.html’) {
link.classList.add(‘active’);
}
}
// General matching for exact paths
else if (currentPath === linkPath) {
link.classList.add(‘active’);
}
// Partial matching for sub-pages (e.g., /blog/post1 should highlight /blog)
else if (currentPath.startsWith(linkPath + ‘/’) && linkPath !== ”) { // Ensure linkPath is not empty
link.classList.add(‘active’);
}
});
});
„`
**Wichtige Änderungen und Überlegungen:**
* `currentPath.replace(//$/, „”)` und `linkPath.replace(//$/, „”)`: Dies entfernt einen optionalen abschließenden Schrägstrich von den Pfaden. So werden `/blog/` und `/blog` als identisch behandelt, was die Vergleichbarkeit verbessert.
* `if (currentPath === ” || currentPath === ‘/index.html’)`: Ergänzt die Prüfung für die Startseite, falls der Server `ihredomain.de` direkt auf ein leeres `pathname` oder `/index.html` auflöst.
* `else if (currentPath.startsWith(linkPath + ‘/’) && linkPath !== ”)`: Dies ist der entscheidende Teil für die Unterseiten. Wenn der `currentPath` mit dem `linkPath` gefolgt von einem Schrägstrich beginnt (z.B. `/blog/erster-post.html` beginnt mit `/blog/`), und `linkPath` nicht leer ist (um zu verhindern, dass die Root-Seite alles hervorhebt), wird der Link als aktiv markiert. Dies sorgt dafür, dass, wenn Sie sich auf `/blog/erster-post.html` befinden, der Link zu `/blog/` oder `/blog/index.html` als aktiv angezeigt wird.
#### 2. Alternative für präzisere Links: data-Attribute nutzen
Manchmal ist der `href` des Links nicht ideal für den Vergleich, oder Sie möchten eine komplexere Logik anwenden. Sie können **data-Attribute** in Ihrem HTML nutzen, um zusätzliche Informationen zu speichern.
„`html
„`
Und dann im JavaScript:
„`javascript
document.addEventListener(‘DOMContentLoaded’, function() {
const currentPath = window.location.pathname.replace(//$/, „”);
const navLinks = document.querySelectorAll(‘#main-nav li a’);
navLinks.forEach(link => {
const dataPath = link.dataset.path; // Holt den Wert des data-path Attributs
if (!dataPath) return; // Überspringe Links ohne data-path
const cleanedDataPath = dataPath.replace(//$/, „”);
if (currentPath === cleanedDataPath) {
link.classList.add(‘active’);
} else if (currentPath.startsWith(cleanedDataPath + ‘/’) && cleanedDataPath !== ”) {
link.classList.add(‘active’);
}
// Spezialfall für die Startseite
else if ((currentPath === ” || currentPath === ‘/index.html’) && cleanedDataPath === ‘/’) {
link.classList.add(‘active’);
}
});
});
„`
Diese Methode bietet mehr Flexibilität und Kontrolle über die Vergleichswerte, ist aber auch mit zusätzlichem Markup-Aufwand verbunden. Für die meisten **statischen Webseiten** ist die `href`-basierte Lösung jedoch ausreichend.
### SEO und Barrierefreiheit: Mehr als nur Ästhetik
Die Hervorhebung der **aktiven Seite** ist nicht nur ein optisches Gimmick, sondern hat auch positive Auswirkungen auf **SEO** und die **Barrierefreiheit**.
#### SEO-Vorteile:
* **Verbesserte Benutzererfahrung (UX):** Eine intuitive Navigation führt dazu, dass Besucher länger auf Ihrer Seite bleiben und sich besser zurechtfinden. Suchmaschinen wie Google bewerten die **Benutzererfahrung** zunehmend als Ranking-Faktor. Eine niedrigere Absprungrate und längere Verweildauer signalisieren Qualität.
* **Bessere Crawlbarkeit:** Auch wenn es keine direkte Auswirkung auf das Crawling hat, unterstützt eine klare Struktur die Besucher, und indirekt auch die Bots, die Seite zu verstehen.
* **Strukturierte Daten:** Auch wenn es hier nicht direkt zum Einsatz kommt, ist die allgemeine Praxis, dem Nutzer zu helfen, sich zu orientieren, ein Teil einer guten Webseiten-Architektur, die von Suchmaschinen geschätzt wird.
#### Barrierefreiheit (Accessibility):
* **Visuelle Hinweise:** Für sehende Nutzer ist die farbliche Hervorhebung sofort erkennbar.
* **Semantische Klarheit:** Sie können die Barrierefreiheit weiter verbessern, indem Sie dem aktiven Link zusätzlich das ARIA-Attribut `aria-current=”page”` hinzufügen. Screenreader können dieses Attribut interpretieren und sehbehinderten Nutzern mitteilen, dass dies der Link zur aktuellen Seite ist.
„`javascript
// Innerhalb des ForEach-Loops
if (/* Bedingung für aktive Seite */) {
link.classList.add(‘active’);
link.setAttribute(‘aria-current’, ‘page’); // Füge ARIA-Attribut hinzu
} else {
link.removeAttribute(‘aria-current’); // Entferne, falls nicht aktiv (wichtig bei dynamischen Seiten, hier optional)
}
„`
Dies ist ein wichtiges Detail für eine wirklich **barrierefreie Webentwicklung**.
### Best Practices und Tipps
* **Laden des JavaScript:** Platzieren Sie Ihr `