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;

 padding: 2px 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 betreibt, muss nicht nur die Gäste bewirten, sondern auch deren Pferde.</dd>

</dl>

…

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.

<em> Emphatischer Ausdruck

CSS - Display-Flex mit Tabellen

PHP - Beispiel zu arithmetischen Operatoren

JavaScript - Langsam zum Seitenanfang scrollen

MySQL - Datensatz Wert um 10% veringern