Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Elemente in der Navigation aktiv setzen lassen

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Da es sich nur um eine Seite handelt, muss den aktiven Elementen die Klasse "active" mit Hilfe von JavaScript mitgegeben werden.
02:51

Transkript

Meine Seite ist nun fast fertig, und abgesehen von ein paar Verbesserungen, was die Bedienbarkeit anbelangt, oder ein paar Effekten, ist sie soweit schon ganz ansehnlich. Sie hat nur einen winzig kleinen Fehler, nämlich den, dass ich zwar meinen ersten Sektor als aktiv gesetzt habe, das heißt, Start ist aktiv, wenn ich aber weiter klicke, heißt das nicht, dass automatisch dieser Status des Aktivseins ebenfalls mitwandert. Um diesen kleinen Makel zu beheben, brauchen wir JavaScript. Es ist aber nur ein ganz kleiner Schnipsel, was wir noch ans Ende unserer "index"-Datei anfügen werden. Dank dieses kleinen Schnipsels wird dann dieses Attribut, bzw. diese Klasse des Aktivseins, tatsächlich auch weiterwandern. Ich habe das schon vorbereitet und füge es jetzt ein. Es ist eine von den Funktionen, die eben ausgeführt werden, wenn alles andere bereits geladen ist. Hier geht es einfach nur darum, dass beim Klick diese Funktion ausgeführt wird, nämlich, dass beim Klicken auf die nächste Klasse diese Aktivklasse entfernt wird von der bisherigen Klasse und der neuen hinzugefügt wird. Mehr ist das eigentlich gar nicht. Wenn ich das Ganze jetzt speichere, und mir in Firefox wieder anschaue, dann werden wir gleich sehen, ob es funktioniert. Ja, es funktioniert ganz gut. Ausgezeichnet. Das Einzige, was mich jetzt optisch noch ein wenig stört, sind diese kleinen gepunkteten Linien, die gerade bei Firefox auftauchen. Die werde ich aber auch ganz gut los. Dazu brauche ich allerdings nochmal meine kleine "LESS"-Datei. Ich wechsle hier in meinen "less"-Ordner und suche meine "meinstyle.less". Da werde ich jetzt einfach hier bei diesen generellen Dingen noch ein kleines Anhängsel für meinen "a:active" machen, bzw. habe ich es gesehen auch beim "a:focus". Das ist ein Klassiker für Firefox. Da sage ich jetzt einfach nur "outline: none". Damit sollte dieser Spuk behoben sein. Ich speichere. Ich wechsle zurück in meine Index-Klasse. Sehe mir jetzt nochmal meine Seite an. Wenn ich jetzt wechsle, habe ich auch diese Punkte am Rand nicht mehr. Nun habe ich mit einem kleinen Schnipsel JavaScript, und noch ein, zwei Verbesserungen in der "LESS"- bzw. CSS-Datei dafür gesorgt, dass meine aktiven Elemente auch tatsächlich aktiv gesetzt werden.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!