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.

<em> Emphatischer Ausdruck

CSS - Display-Flex mit Tabellen

PHP - Beispiel zu arithmetischen Operatoren

JavaScript - Langsam zum Seitenanfang scrollen

MySQL - Datensatz Wert um 10% veringern

Rechtsklick verboten!
Einen Rechtsklick mit der Maustaste zu verbieten, zum Beispiel mit Javascript, ist nicht originell, sondern dumm. Mit dem Rechtsklick kann man das Kontextmenü anzeigen lassen, und die Homepage zu den Favoriten hinzufügen, oder die Seite ausdrucken. Den Quelltext kann man nicht mit Javascript schützen, denn es gibt viele Wege und Mittel, um an diesen zu gelangen. Sollte man sensible Daten ins Internet stellen?