Eine ganze Website in einer einzigen HTML Datei

Ich kann nicht aufhören, an diese Seite zu denken. Es sieht nach einer ziemlich Standardkost aus; eine Website mit Links zu verschiedenen Seiten. Nichts Besonderes, außer dass… die ganze Website in einer einzigen HTML-Datei enthalten ist.

Was ist mit dem Klicken auf die Navigationslinks, fragen Sie? Jeder Link zeigt und verbirgt lediglich bestimmte Teile des HTML.

<section id="home">
  <!-- home content goes here -->
</section>
<section id="about">
  <!-- about page goes here -->
</section>

Jede <section> wird mit CSS versteckt

section { display: none; }

Jeder Link in der Hauptnavigation verweist auf einen Anker auf der Seite

<a href="#home">Home</a>
<a href="#about">About</a>

Und sobald Sie auf einen Link klicken, wird die <section> für diesen speziellen Link über

section:target { display: block; }

Sehen Sie diesen :target Pseudo-Selektor? Das ist die Magie! Sicher, er existiert schon seit Jahren, aber das ist eine clevere Art, ihn zu nutzen. Meistens wird er verwendet, um den Anker auf der Seite hervorzuheben, sobald ein Ankerlink darauf geklickt wurde. Das ist eine praktische Möglichkeit, dem Benutzer zu helfen zu wissen, wohin er gerade gesprungen ist.

Wie auch immer, die Verwendung von :target auf diese Weise ist super clever! Es sieht aus wie eine normale Website, wenn man herumklickt.

Direkter Link →