JavaScript - Die aktuelle Seite in der Navigation hervorheben

Datei: lorem.php


<!DOCTYPE html>

<
html lang="de">
<
head>
    <
meta charset="UTF-8">
    <
meta name="viewport" content="width=device-width, initial-scale=1.0">
    <
title>Lorem</title>

<
style>
  .
hervorheben {
    
text-decorationUnderline 2px #ff0000;
  
}
</
style>

</
head>
<
body>

<
nav>
    <
a data-active="home" href="index.php">Home</a>
    <
a data-active="lorem" href="lorem.php">Lorem</a>
    <
a data-active="wortbergen" href="wortbergen.php">Wortbergen</a>
    <
a data-active="lorem_ipsum" href="lorem_ipsum.php">Lorem Ipsum</a>
 </
nav>

  <
script>
  
let url document.URL.split("/");
  
url url[url.length 1];
  
document.querySelectorAll("[data-active]").forEach((active) => {
    if (
url == active.getAttribute("href")) {
      
active.classList.add("hervorheben");
    }
  });
  </
script>

</
body>
</
html>

Siehe auch: JavaScript - 'https' und den Querystring aus der URL entfernen

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<audio> Audio-Datei

CSS - Listenelemente einfärben

PHP - Redirect auf eine andere Seite

JavaScript - Filter für HTML-Listenelemente

MySQL - Höchstwert einer Spalte ermitteln