Farbwechsel bei onclick

[Dennis]

Hi Kilian,

Das was du machen willst hat eher etwas mit Javascript, als mit CSS zu tun, da du mit CSS keine Zustände speichern kannst.

Ich fasse noch mal zusammen, was du machen willst: Du willst im Prinzip einen Markieren-Effekt nachbauen, wie man ihn z.B. von diversen Explorer-Programmen kennt. Du klickst eine Datei an und diese wird andersfarbig dargestellt, klickst du auf eine andere Datei so wird diese andersfarbig dargestellt und die erste wieder normal.

Zuerst einmal solltest du zwei CSS-Klassen machen, welche die Darstellung der zu markierenden Elemente regeln:

~~~css .element-normal {
    background: #fff;
    border: 1px solid #eee;
  }
  .element-selected {
    background: #55a;
    border: 1px solid #335;
  }

  
Natürlich kannst du den CSS-Code beliebig anpassen. Anschließend erstellst du dein HTML, wobei du jedem Element die Standard-CSS-Klasse gibst, also nicht die Klasse für den ausgewählten Zustand:  
  
  ~~~html
<a href="#" class="element-normal">Nummer 1</a>  
  <a href="#" class="element-normal">Nummer 2</a>  
  <a href="#" class="element-normal">Nummer 3</a>

Per Javascript weist du den Elementen nachträglich ein onclick-Handler zu (informiere dich über Unobstrusives Javascript). Natürlich kannst du das komplett zu Fuß programmieren, aber es wird deutlich einfacher unter der Verwendung eines entsprechenden Frameworks. Ich zeige es dir hier mal exemplarisch mit dem Prototype-JS Framework:

~~~javascript window.onload = function() {
    // dieser Code wird nach dem Laden der Seite ausgeführt
    $$('.element-normal').each(function(elem) {
      // Für jedes Element mit der Klasse element-normal,
      // setzen wir den onclick-Handler:
      elem.onclick = function() {
        // Alle Elemente mit der Klasse element-selected
        $$('.element-selected').each(function(selElem) {
          // Die CSS-Klasse element-normal setzen und
          selElem.addClassName('element-normal');
          // element-selected entfernen
          selElem.removeClassName('element-selected');
        });
        // das Element muss sich selber element-selected setzen
        elem.addClassName('element-selected');
        // und element-normal entfernen
        elem.removeClassName('element-normal');
      }
    });
  }

  
Ich habe das [hier](http://tutorial.riehle-web.com/selfforum/bsp/filebrowser.html) auch noch mal als Demo hingestellt. Du könntest das jetzt noch verbessern, in dem du z.B. noch die Strg-Taste abfragst und nur wenn diese nicht gedrückt ist, die bisher markierten Elemente de-markierst. Dann wäre eine Mehrfachauswahl möglich, wie einfach das aber zu realisieren ist mit der Strg-Taste weiß ich grad nicht - das ist schon was länger her, dass ich so Sachen das letzte Mal gemacht habe ;-)  
  
  
Viele Grüße,  
  ~ Dennis.

-- 
Mein [SelfCode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): [ie:{ fl:( br:> va:) ls:\[ fo:) rl:( n4:# ss:) de:\] js:| ch:{ sh:| mo:} zu:|](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%7B+fl%3A%28+br%3A%3E+va%3A%29+ls%3A%5B+fo%3A%29+rl%3A%28+n4%3A%23+ss%3A%29+de%3A%5D+js%3A%7C+ch%3A%7B+sh%3A%7C+mo%3A%7D+zu%3A%7C)