Texte wechseln bei Klick

JessicaOnline · 4. September 2016

Hallo,

ich habe nochmals eine Frage. Auf meiner Webseite gibt es eine Top Navigation, diese sieht so aus:

HTML

<nav class="nav-first">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Über mich</a></li>
<li><a href="#">Hundebetreuung</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Datenschutz</a></li>
<li><a href="#">Bilder</a></li>
</ul>
</nav>

Alles anzeigen

Darunter gibt es ein Bereich, wo ich den jeweiligen Text ausgeben lasse

HTML

<section class="page-header">
<div class="page-header-description">
<h2><span class="fa fa-arrow-right right-fa-abstand" aria-hidden="true"></span> Startseite</h2>
<p>Hier kommt Inhalt rein</p>
</div>
</section>

Jetzt möchte ich folgendes erreichen:

Klick ein User auf einen Navigationspunkt, sollte dieser auf aktiv gesetzt werden (klasse hinzufügen, vielleicht mit jQuery und der Funktion .addClass?) und im unten Bereich (section class="page-header) sollte sich der Text mit einem kleinen Effekt wechseln, z.B. langsames ein und ausblenden.

Wie könnte ich dieses umsetzten?

Edit: Hier habe ich etwas gefunden:

Jetzt fehlt mir eigentlich nur noch der "weiche" Übergang und das hinzufügen einer Class?

Sempervivum · 4. September 2016

"Klick ein User auf einen Navigationspunkt, sollte dieser auf aktiv gesetzt werden (klasse hinzufügen, vielleicht mit jQuery und der Funktion .addClass?)" Ich denke, damit bist Du auf dem richtigen Wege. Was fehlt dir denn für eine Umsetzung?

Wie Du die Texte am besten dynamisch anzeigst, hängt wesentlich davon ab, wie lang sie sind. Sind sie sehr kurz, kannst Du sie alle gleichzeitig auf der Seite unterbringen und den richtigen jeweils sichtbar machen. Sind sie länger, ist es empfehlenswert, sie mit Ajax zu laden, so wie es in den Beispielen gemacht wird, die Du gefunden hast.

Beim Überblenden kannst Du so vorgehen: Den neuen und den alten Text mit absoluter Positionierung übereinander legen und den neuen mit CSS z-index in den Vordergrund bringen. Den neuen jedoch zunächst unsichtbar machen, indem Du die Deckkraft (CSS opacity) auf 0 setzt. Dann die Deckkraft auf 1 animieren.

Wenn Du das nicht selber programmieren möchtest, könntest Du einen vorgefertigten Slider verwenden. Swiper z. B. ist flexibel, bietet Überblenden und ermöglicht es, nachgeladene Inhalte dynamisch hinzu zu fügen.