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.

<del> Logische Auszeichnung

CSS - Tabellenzeilen einfärben

PHP - Formulareingaben überprüfen und Fehlermeldungen ausgeben

JavaScript - Anzahl der HTML-Tags

MySQL - Datum vom Timestamp anzeigen

Weg in 60 Sekunden!
Die erste Minute beim Besuch Ihrer Homepage ist die wichtigste. Es wird entschieden, ob der Besucher auf der Seite bleibt oder weiter surft. Zeigen Sie Ihrem Besucher, dass er genau Ihre Homepage braucht, um an seine Informationen zu kommen.
Fassen Sie Ihre Inhalte recht kurz (2 bis 3 Sätze), denn jeder Besucher möchte schnellstmöglich wissen, was Ihn erwartet.