Nutzen Sie als Basis das Markup und die Styles aus der letzten Übung.
Erzeugen Sie oberhalb des Main-Content Bereichs in der index.html
eine Tab-Navigation mit den Reitern “Mein Bereich”, “Über das Projekt” und “Aktuelles” und stylen Sie diese entsprechend dem vorliegenden Mockup.
Fügen Sie der index.html
, neben dem Main-Content Bereich, drei Abschnitte hinzu, die den Inhalt für die jeweiligen Reiter darstellen.
Kopieren Sie in den zweite Abschnitt den Inhalt der Seite about-the-project.html
. Fügen Sie in den dritten Abschnitt Blindtext ein.
Stylen Sie die Abschnitte so, dass sie übereinander liegen und nur der erste Abschnitt sichtbar ist.
Für die Anordnung der Abschnitte können Sie als Hilfestellung folgendes CSS Snippet nutzen:
.tab-grid {
display: grid;
grid-template-columns: 1fr;
> * {
grid-row-start: 1;
grid-column-start: 1;
display: none;
&.is-active {
display: block;
}
}
}
Erzeugen Sie JavaScript Code in der main.js
, welcher bei einem Klick auf einen Tab den dazugehörigen Abschnitt sichtbar macht und die anderen Abschnitte ausblendet und den aktiven Tab hervorhebt.