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.

<button> Button

CSS - Verwendung von Datenattributen (data-*)

PHP - MySQL-Version ermitteln und anzeigen

JavaScript - Zeilen, Wörter und Zeichen in einem Textarea zählen

MySQL - Text automatisch nach Zeichenanzahl kürzen

In Kontakt bleiben
Nichts ist wichtiger als der Kontakt zu seinen Besuchern: Nur so können Wünsche, Anregungen und konstruktive Kritik ausgetauscht werden.
Am besten ist es, Sie betreiben ein kleines Forum wo Besucher oder Mitglieder Ihre Wünsche und Anregungen mitteilen können. Oder Sie bauen eine Umfrage in Ihre Homepage ein. Auch über ein Kontaktformular können Sie Kritik und Verbesserungsvorschläge entgegennehmen.