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:
- http://yourhp.de/demo/jQuery/loadContent.php
- https://blog.kulturbanause.de/…vascript-jquery-ersetzen/
Jetzt fehlt mir eigentlich nur noch der "weiche" Übergang und das hinzufügen einer Class?