Tabellen Zellen färben, a:active?!

Dieses Thema im Forum "Webdesign" wurde erstellt von osiris, 25. Dezember 2013 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 25. Dezember 2013
    Moin..

    hab da ein kleines Problem, habe folgende Tabelle:

    Code:
    <table width="98%" border="0" style="top:150px">
     <tr style="text-align:center; font-weight:bold">
     <td onmouseover="this.style.background='#c4d02a'" onmouseout="this.style.background='#FFFFFF'"><a href="#" onClick="einblenden('punkt1'); ausblenden('punkt2', 'punkt3', 'punkt4', 'punkt5', 'punkt6');return false;"><p>Punkt1</p></a></td>
     <td onmouseover="this.style.background='#c4d02a'" onmouseout="this.style.background='#FFFFFF'"><a href="#" onClick="einblenden('punkt2'); ausblenden('punkt1', 'punkt3', 'punkt4', 'punkt5', 'punkt6');return false;"><p>Punkt2</p></a> </td>
     <td onmouseover="this.style.background='#c4d02a'" onmouseout="this.style.background='#FFFFFF'"><a href="#" onClick="einblenden('punkt3'); ausblenden('punkt1', 'punkt2', 'punkt4', 'punkt5', 'punkt6');return false;"><p>Punkt3</p></a> </td>
     <td onmouseover="this.style.background='#c4d02a'" onmouseout="this.style.background='#FFFFFF'"><a href="#" onClick="einblenden('punkt4'); ausblenden('punkt1', 'punkt2', 'punkt3', 'punkt5', 'punkt6');return false;"><p>Punkt4</p></a> </td>
     <td onmouseover="this.style.background='#c4d02a'" onmouseout="this.style.background='#FFFFFF'"><a href="#" onClick="einblenden('punkt5'); ausblenden('punkt1', 'punkt2', 'punkt3', 'punkt4', 'punkt6');return false;"><p>Punkt5</p></a> </td>
     <td onmouseover="this.style.background='#c4d02a'" onmouseout="this.style.background='#FFFFFF'"><a href="#" onClick="einblenden('punkt6'); ausblenden('punkt1', 'punkt2', 'punkt3', 'punkt4', 'punkt5');return false;"><p>Punkt6</p></a> </td>
     </tr>
    </table>
    Ist eine einfache Zeile, in der 6 Zellen vorhanden sind, in denen jeweils ein Wort steht, welches anklickbar ist. Wenn es angeklickt wird, so öffnet sich direkt darunter eine Box, in welcher Text steht.

    Die Frage ist nun, der Hintergrund der Tabelle ist weiß. Allerdings sollte der Hintergrund des aktiven Elements grün werden. Nur hab ich keine Ahnung, wie ich die Zelle färben könnte.

    Was ich mir überlegt hätte: das a href um die jeweils komplette Zelle zu legen und dann ein a:active td background=#grün hinzuzufügen. Aber funktioniert das, oder wie löst man das am elegantesten?
     
  2. 26. Dezember 2013
    AW: Tabellen Zellen färben, a:active?!

    das müsstest du bei onclick mit reinpacken, das dann die angeklickte zelle die farbe wechselt.

    zb funktion: farbegruen(a){a.style.background='green';} und dann aufrufen onclick="farbegruen(this);"

    dann bleibt diese aber grün, sofern du dann wieder etwas anderes anklickst bleibt es grün, du müsstest also dann wieder alle td durchgehen und den background neutralisieren.
     
  3. 26. Dezember 2013
    AW: Tabellen Zellen färben, a:active?!

    Okay, also wäre meine Idee schonmal garnicht so verkehrt gewesen.

    Auf das Problem, wie die dann wieder weiß wird, sofern man eine andere anklickt, bin ich auch gestoßen. Was meinst du mit, ich müsste alle neutralisieren? Kann ich bei einem onclick event zuerst den background der ganzen aktuellen Tabelle auf weiß setzen und dann die jeweilige Zelle Grün machen? (Ähnlich einblenden/ausblenden)
     
  4. 26. Dezember 2013
    AW: Tabellen Zellen färben, a:active?!

    TD Elemente kannst du im übrigen auch mit CSS :hover ansteuern.
    Um den Zustand der Zellen zu ändern (active) musst du mit mit JavaScript arbeiten.

    Code:
    wenn TD angeklickt:
     alle TDs im menü duchgehen und jeweils die css-klasse "active" entfernen.
     dem angeklickten TD element die klasse "active" geben
    ende.
    Wie das Element dann aussieht kannst du mit CSS td.active regeln.
     
  5. 26. Dezember 2013
    AW: Tabellen Zellen färben, a:active?!

    Danke schön!
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.