Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

:active nur während click? (css)





Frage

Leider scheint :active nur den Fall anzusprechen, wo man mit der Maus auf etwas clickt und die Maustaste gedrückt lässt. Ich brauche aber etwas, mit dem man anzeigen kann, auf welcher Seite man sich gerade befindet (z.B. das zuletzt angewählte Menu-item hat eine andere Farbe). :active müsste also quasi bis zum nächsten click dauern und nicht nur bis man die Maustaste wieder loslässt. Kann man so etwas mit CSS machen? MfG Ghost

Antwort 1 von katy

Hallo Ghost,

das ist mit CSS nicht zu machen. Es gehört aber auch zu den eher unschönen Sachen, auf die Seite einen Link zur Seite zu schreiben. Sinnvoller ist es dann, diesen Teil in der Navi einfach vin vornherein nicht als Link zu schreiben. Bei dynamischen Seiten kann dies zB PHP übernehmen. Und diesem Teil der Navi kannst du dann natürlich das gleiche CSS geben wie a:active.

Alternativ gäbe es noch JavaScripte, die nachträglich aller Links auf der Seite durchlaufen, prüfen ob href mit der URL der Seite übereinstimmt und dann CSS-Zuweisungen anpassen.

katy

Antwort 2 von Rayn0r

Ja das habe ich mir leider schon gedacht.
PHP kommt leider nicht in Frage, schon nur weil ich davon keine Ahnung habe.

JavaScript wäre wohl die beste Lösung für mich, da kenne ich mich aber auch nicht so gut aus. Ich habe vorhin ein wenig daran rumgebastelt, hat aber nicht funktioniert. Ich wollte mit onMousedown den style (die Farbe) ändern.

Wie funktioniert denn das script mit dem URL-Vergleich?
Danke

Antwort 3 von katy

Hallo Ghost,

Das Skript funktioniert so:

<script type="text/javascript">
function init() {
 nav = document.getElementById("navi") {
 if (nav) {
/* gibts eine navi? */
  var dieseSeite=window.location.href;
/* aktuelle URL holen */
  var links = nav.getElementsByTagName("a");
/* eine Liste (Array) aller Links in der Navi anlegen */
  for (var a=0; a<links.length; a++) {
/* bei jedem Element des Arrays ... */
   if (dieseSeite.indexOf(links[a].getAttribute("href"))>=0) links[a].className = "aktiv";
/* ... prüfen ob das Linkziel zumindest teilweise der URL entspricht und dann die Klasse aktiv setzen */
  }
 }
}

window.onload = init;
/* wenn Seite geladen mit der Funktion init beginnen */
</script>

Du müsstest das Skript du im head-Bereich unterbringen. Und deiner Navi die id="navi" geben.
Außerdem im CSS noch die Klasse aktiv berücksichtigen, zB indem du
a:active
ergänzt zu
a.aktiv, a:active

Probleme könnte es eigentlich nur geben, wenn du window.onload schon verwendest oder im <body> ein onload-Attribut verwendest.

katy

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: