Wie bleibt mein Button aktiv und behält das ":active css Attribut" NACH der Weiterleitung

  • Hallo,


    ich hab eine Menüleiste - die Links führen alle zu unterschiedlichen HtmlSeiten.

    Nun möchte ich, wenn ich auf der Startseite auf den "A"-Button click und dann auf der A-Html lande - wo natürlich auch die gleiche Menüleiste ist, dass dann der A-Button gehighlighted (Denglisch ;) ist,

    damit man weiß dass man auf der A-Seite ist.

    So nach einiger Recherche habe ich halbe Lösungsansätze gefunden via CSS mit :active :focus und :target etc - aber funktioniert nur wenn ich innerhalb der gleichen HTMlseite wohin springe (irgendwie auch logisch) und via Jquery :

    Code
    $('button').on('click', function(){    $('button').removeClass('selected');    $(this).addClass('selected');
    });
    Code
    button.selected{  color:red;
    }

    aber da hab ich das gleiche Problem (auch logisch, denn den selektierten Button habe ich ja auf der vorherigen Seite angewählt und da ist er auch rot), dass das nur auf der gleichen html-Seite funktioniert. Übrigens ich hab keine "buttons" sondern "nav ul li" in der Menüleiste.


    Ich könnte auch für jede HTML-Seite eine extra css-Datei machen, die den aktuellen Button-Status definiert.


    Aber gibt es nicht noch eine "einfache und logische" Lösung innerhalb meiner Haupt-Css-Datei? also dass ich wenn ich auf der Seite A bin, der Link A "Dauer-aktiv" ist und somit immer gehighlited ist, wenn auf A? Oder wäre das auch die Lösung mit seperaten css-Dateien?


    Danke schonmal.

  • Die sauberste Lösung ist, Server seitig für den der aufgerufenen Seite Menüpunkt eine CSS-Klasse zu hinterlegen, bspw. active-item.

    Diese Klasse kannst Du dann global in Deiner CSS stylen, ohne Pseudo-Selektoren.


    Wie gesagt, wäre die sauberste Lösung...

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!