Wie in HTML und CSS einen angeklickten Button "gedrückt" halten?
Ich habe ein paar Buttons, die zwischen den HTML-Dokumenten auf dem Server switchen. Die Effekte mit
a:hover {
...
}
a:active {
...
}
sind mir bereits bekannt.
Nur soll eben, wenn der Benutzer einen dieser Buttons wählt, z. B. den "Home" Button, der ihn dann auf die home.html bringt, dieser Button "gedrückt" bleiben, also z. B. die Eigenschaften von a:active übernehmen.
Nur solange der Benutzer auf der home.html ist. Wenn er z. B. auf die next.html geht, dann soll dieser Button "next" gedrückt bleiben.
3 Antworten
Ohne Deinen Code zu kennen, kann man nicht allzu genau helfen.
Eine Möglichkeit wäre, die Styles auf der jeweiligen Seite zu überschreiben.
Ich nehme mal an Du hast Deine CSS Styles in einer Datei gespeichert, worauf dann jede Unterseite zugreift.
Gib in Deiner home.html im header Deinem Home-Button einfach andere Styles, das gleiche wie Du bei "a:active" hast oder was auch immer Du bevorzugst.
Styles in der HTML Datei überschreiben die Styles der importierten Datei, heisst für Deine home.html ist es egal, was für den Home-Button in der CSS Datei steht (sofern alles überschrieben ist).
So kannst Du für die jeweilige Seite Anpassungen machen, ohne dass es sich auf Deine anderen Seiten auswirkt.
Für die home.html änderst Du also den Home-Button,
für die next.html den Next-Button und so weiter.
Man kann einen Button nicht auf "active" setzen. Man kann ihn höchstens fokussieren. Aber was du willst, ist etwas anders, glaube ich: Du willst du dem Button ein bestimmtes Design geben, nur wenn der Nutzer auf der Startseite ist. Wie das geht, hängt von der Backend-Technologie ab, die du verwendest. Wenn du bloß HTML verwendest, geht es zum Beispiel so:
Startseite:
<a class="button active">Home</a>
andere Seiten:
<a class="button">Home</a>
CSS:
.button.active {
/* ... */
}
Wenn ich das richtig verstehe, wechselt der User nach dem Klick die Seite. In dem Fall (und ansonsten eigentlich auch nicht, weil HTML und CSS keine Eingaben verarbeiten können) kannst du das so nicht lösen. Entweder du gibst einfach für jede Seite im Style-Teil für diesen speziellen Button (oder eigentlich Link) die gleichen Eigenschaften wie für active ein, oder du schreibst eine Funktion in einer Skriptsprache (server- oder clientseitig), die das Problem für dich löst.