Wie style ich Link-Menüs zum Filtern wie die "Dean + Friends" "Just Dean" "Nur Freunde" eine auf Facebook?

Question

Auf mehreren Seiten unserer E-Commerce-Webanwendung können Benutzer eine Statusliste von Anfragen filtern, die sie an uns gesendet haben.

Die Filter sind in der Regel so etwas wie:

Alle Pending abgeschlossen

wir sie als Links eingerichtet haben. Wir möchten sie so gestalten, dass der gerade aktive Filter durch ein farbiges Rechteck hervorgehoben wird (mit abgerundeten Ecken, natch!) Und der Text wird weiß.

Die rechteckige Hervorhebung bleibt bestehen, bis der Benutzer auf einen der anderen Filter klickt (Pending, Completed). An diesem Punkt wird die Hervorhebung auf den angeklickten Link verschoben.

Ein Beispiel dafür an mehreren Stellen auf Facebook zeigt, wo zum Beispiel Wand gefiltert werden in:

Dean + Friends Nur Dean Just Friends

Gibt es eine einfache Möglichkeit, dies zu tun in CSS, vielleicht indem man den zuletzt besuchten Link stylt, vorher besuchte aber als nicht besucht markiert?

Danke,

Dean Richardson

Answer 1

Gibt es eine einfache Möglichkeit, dies in CSS zu tun, vielleicht durch die am meisten vor kurzem 'besucht' Link Styling aber vorher besuchten als unvisited Kennzeichnung?

Sie können die Dynamik dieses Effekts nicht mit reinem CSS erzeugen. Facebook tut dies, indem es eine CSS-Klasse mit Javascript hinzufügt, die ausgelöst wird, wenn Sie auf eine der Pill-Tab-Schaltflächen klicken. Die CSS-Klasse enthält Stilregeln, die sie in der gewünschten Weise erscheinen lassen.