Wie können Schaltflächen aktiviert bleiben, nachdem sie angeklickt wurden?

9

Ich verwende derzeit den folgenden Code für meine Menüelemente:

HTML

%Vor%

CSS

%Vor%

Ich muss erreichen, dass die Schaltflächen im aktiven Status bleiben, nachdem sie angeklickt und die Seite geladen / aktualisiert wurde.

Wenn die Lösung Javascript benötigt, beachte bitte, dass ich ein Amateur bin, also brauche ich Erklärungen in Laienform (vorzugsweise mit Beispielen).

    
OCD 30.11.2012, 17:24
quelle

4 Antworten

2

Sie müssen die Seite identifizieren, auf der Sie sich gerade befinden.

%Vor%

Wenn Sie jQuery nicht verwenden, ersetzen Sie diese Zeile:

%Vor%

mit dieser Zeile:

%Vor%

Hoffe, das hilft.

    
War10ck 30.11.2012, 17:49
quelle
3

Am besten, wenn Sie CSS-Klassen mit JS verwenden. Auf diese Weise können Sie beide Stile für die Pseudoklasse (: Hover) sowie die CSS-Klasse mischen.

%Vor%

Oder wenn Sie es umschalten möchten.

%Vor%

Auf diese Weise müssen Sie bei Änderungen Ihres Layouts nur die CSS-Stile aktualisieren, die von dieser Klasse abweichen, und Ihren JavaScript-Code nicht aktualisieren.

Sie können das Window- oder localStorage-Element verwenden, um die Bühne über Seitenaktualisierungen hinweg zu halten.

%Vor%

Wenn Sie nun Ihre Seite laden, können Sie einfach alle Bilder aktualisieren:

%Vor%

--- BEARBEITEN ---

Hier ist Ihre DEMO.

Das Beispiel verwendet localStorage, aber es würde genauso mit dem window-Objekt funktionieren. Achten Sie darauf, den Code zu kopieren und einzufügen und es auf Ihrem lokalen Rechner auszuprobieren, da jsfiddle einige Blöcke gegen das, was vor sich geht, hat.

Ссылка

    
matsko 30.11.2012 17:37
quelle
1

Sie könnten ein wenig jquery verwenden, um zu sehen, was url ist, parsen und dann die Klasse active erneut auf den entsprechenden Link anwenden.

I.E (ich habe das nicht getestet ... es ist eher eine Idee ...)

%Vor%     
Darren 30.11.2012 17:47
quelle
-1
%Vor%

DEMO

    
Garry 30.11.2012 17:28
quelle

Tags und Links