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.

<iframe> Eingebettetes Framefenster

CSS - Uhrzeitanzeige mal anders!

PHP - Zahl in Stunden und Minuten umrechnen

JavaScript - Falsche Zahleneingabe ändern

MySQL - Spalte auf UNIQUE setzen

Freiraum
Quetschen Sie nicht so viel Text, Links und Bilder auf eine Seite. Lassen Sie freien Raum. Der Besucher wird es ihnen danken, außerdem erhöht es die Übersichtlichkeit.