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>
…
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.
<pre> Präformatierter Text
CSS - Kalender Symbol neben dem Datepicker
PHP - Nach einer bestimmten Zeit automatisch abmelden