JavaScript - Interne Anker hervorheben

Über JavaScript lässt sich das Fragment (seite.php?test=eins#zwei) eines Links (mit: window.location.hash) auslesen. Dieses Fragment kann man nun benutzen um zu einem internen Anker (einer anderen Seite) zu springen und diesen hervorzuheben.

➤ Klicke auf den Link: Stammverzeichnis um zu sehen wie dies auf meiner Website funktioniert.

Demo

Kuriose Gesetze in Australien

Paragraph 1 - Paragraph 2 - Paragraph 3 - Paragraph 4 - Paragraph 5 - Paragraph 6 - Paragraph 7 - Paragraph 8 - Paragraph 9

Paragraph: 1
Wer eine Bar betreibt, muss nicht nur die Gäste bewirten, sondern auch deren Pferde.
Paragraph: 2
Heu darf nur im Kofferraum befördert werden, wenn es sich beim Fahrzeug um ein Taxi handelt.
Paragraph: 3
Es ist verboten, auf offener Straße schwarze Kleidung und Filzschuhe zu tragen und sich dabei schwarze Schuhpaste ins Gesicht zu schmieren. Man könnte ein Katzendieb sein!
Paragraph: 4
Singt man ein obszönes Lied, darf einen niemand dabei hören.
Paragraph: 5
An der Gold Coast (Queensland) ist es illegal einen Bikini zu tragen der aus mehr als 0.00387096 m2 Stoff besteht.
Paragraph: 6
Trifft man rein zufällig einen Piraten, so ist Handel betreiben mit ihm verboten.
Paragraph: 7
Es ist illegal jemandem Tarot-Karten zu legen, da dies als Hexerei ausgelegt werden kann.
Paragraph: 8
Alkohol kaufen ist ebenfalls verboten, ihn trinken aber nicht.
Paragraph: 9
Wer rechts auf einem Gehweg läuft, kann unter Umständen bestraft werden, in Australien herrscht schließlich Linksverkehr.

<style>

.
markierung {
 
background#FFCA95;
 
padding2px 5px 2px 5px;
}
</
style>

<
script>
window.addEventListener("DOMContentLoaded", function() {

 if (
window.location.hash) {
  
let id window.location.hash.substr(1);
  if (
document.getElementById(id)) {
   
document.getElementById(id).classList.add("markierung");
  }
 }

});
</
script>

<
h1>Kuriose Gesetze in Australien</h1>

<
p>
 <
a href="interne_anker_hervorheben.php?1#paragraph1">Paragraph 1</a> - 
 <
a href="interne_anker_hervorheben.php?2#paragraph2">Paragraph 2</a> - 
 <
a href="interne_anker_hervorheben.php?3#paragraph3">Paragraph 3</a> - 
 <
a href="interne_anker_hervorheben.php?4#paragraph4">Paragraph 4</a> - 
 <
a href="interne_anker_hervorheben.php?5#paragraph5">Paragraph 5</a> - 
 <
a href="interne_anker_hervorheben.php?6#paragraph6">Paragraph 6</a> - 
 <
a href="interne_anker_hervorheben.php?7#paragraph7">Paragraph 7</a> - 
 <
a href="interne_anker_hervorheben.php?8#paragraph8">Paragraph 8</a> - 
 <
a href="interne_anker_hervorheben.php?9#paragraph9">Paragraph 9</a>
</
p>

<
dl>
 <
dt id="paragraph1">Paragraph: 1</dt>
 <
dd>Wer eine Bar betreibtmuss nicht nur die Gäste bewirtensondern auch deren Pferde.</dd>
</
dl>

Damit das Demo hier funktioniert, wurde zusätzlich der Dateiname dieser Seite und ein einmaliger Query String hinzugefügt.

interne_anker_hervorheben.php?1#paragraph1

➤ Wenn eine andere Seite mit einem Anker aufgerufen wird, ist dies nicht notwendig!

Siehe auch: URL Query und Fragment über JavaScript auslesen

Bausteine  Alle Anzeigen

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

<pre> Präformatierter Text

CSS - Kalender Symbol neben dem Datepicker

PHP - Nach einer bestimmten Zeit automatisch abmelden

JavaScript - HTML-Title Attribut tauschen

MySQL - Spalten aktualisieren

Vorschaubilder
Gerade wenn Sie eine Webseite mit sehr vielen Bildern besitzen, sollten Sie darauf achten, dass Sie jeweils Vorschaubilder anzeigen und nicht die originalen Bilder. In der Regel schauen sich Ihre Besucher nicht alle Bilder an, müssen aber warten, bis alle Bilder geladen sind.