Anker + Scroll Bottons

[Gunnar Bittersmann]

@@einsiedler

Das script:

Kein „Script“; weder HTML noch CSS sind Programmiersprachen.

Online-Beispiel, bitte.

<input type="radio" name="scroll" id="modul1" checked="checked"><a href="#home">Home</a>
<input type="radio" name="scroll" id="modul2"><a href="#about">About</a>
<input type="radio" name="scroll" id="modul3"><a href="#news">News</a>
<input type="radio" name="scroll" id="modul4"><a href="#impressum">Impressum</a>
<input type="radio" name="scroll" id="modul5"><a href="#links">Links</a>
<label id="l1" for="modul1"></label>
<label id="l2" for="modul2"></label>
<label id="l3" for="modul3"></label>
<label id="l4" for="modul4"></label>
<label id="l5" for="modul5"></label>

Die Radiobuttons haben keine Beschriftung; dein Markup ist kaputt.

Was möchtest du erreichen? So etwas? Das geht mit der :target-Pseudoklasse.

Nachtrag: Statt ursprünglich display: none hab ich jetzt die nicht angewählten sections nur visuell versteckt, damit der Inhalt barrierefrei erreichbar ist.

Eine andere Möglichkeit wäre, Screenreader per ARIA-Attribute anzuweisen, auf Änderungen der Sichtbarkeit der sections zu reagieren.

LLAP 🖖