@@mark:

nuqneH

Allerdings möcht ich von dieser Vorgehensweise abraten. So weit als möglich solltest du Inhalt (Html) von Funktionalität (Javascript) und Layout (CSS) trennen. Javascript ist nicht in erster Linie dazu da, deine Seite mit Inhalt zu füllen.

Bei modernen Webapplikationen tut man das aber: Bei Interaktionen wird nicht eine neue Seite aufgerufen, sondern auf der bestehenden weren mit AJAX Inhalte geändert. Im besten Fall (lies: unbedingt) widerspiegelt sich der geänderte Zustand im URI, der Zustand der Seite kann als Lesezeichen gespeichert und an andere per Social Network oder Mail weitergegeben werden. Auch der Back-Button sollte so funktionieren, als hätte man die Seite gewechselt.

2. Solange es sich um kleine Datenmengen handelt kannst du für jeden Link einen Container samt Inhalt erstellen und jene Container, die gerade nicht angeklickt sind mit CSS (display:none) ausblenden.
   Javascript verwendest du, um den diese Eigenschaft zu setzen.

Damit wird der geänderte Inhalt zwar *sicht*bar, aber barrierefrei ist das nicht. Also mit JavaScript nicht die display-Eigenschaft ändern (man sollte in den allermeisten fällen sowieso mit JavaScript nicht direkt CSS-Eigenschaften ändern), sondern bspw. das hidden-Attribut: http://forum.de.selfhtml.org/archiv/2014/6/t217798/#m1497497 f.

3. Nur der Vollständigkeit halber: Es ist auch möglich dein Vorhaben ohne Javascript, nur mit CSS umzusetzen. Mit dem CSS-Selektor :target.

Das Unschöne daran ist der (oft unerwünschte) Sprung auf der Seite beim Anwählen eines Ankers.

Qapla'