Vollständige Version anzeigen : Tabellen Zellen färben, a:active?!


osiris
25.12.2013, 10:15

Moin..

hab da ein kleines Problem, habe folgende Tabelle:

<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?

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
raid-rush
26.12.2013, 13:52

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.


osiris
26.12.2013, 20:26

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)


Murdoc
26.12.2013, 21:45

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.

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.


osiris
26.12.2013, 22:42

Danke schön!


Ähnliche Themen zu Tabellen Zellen färben, a:active?!
  • Netbook mit 3 Zellen akku
    Hallo! Dieser Netbook DiTech Computer (;;;ditech~at/artikel/NEDA101/101Zoll_Netbook_dimotion_AttoBook_A101_256cm_SVGA_TFT_schwarz;html) Hat einen 3 Zellen Akku,in der Informations Liste,steht zwar nicht wie der Akkuzeit eigentlich ist! Was eigentlich bei Netbooks eigentlich sehr besonders wic [...]

  • Zellen mit einfacher Zellmembran -Help-
    Hallo ich muss mit meinem Bio Kurs ein Referat schreiben bzw eine Präsentation über Zellen mit einfacher Zellmembran! Hat einer von euch dieses Thema shcon behandelt und hat shcon eine Präsentation? PPT! ( powerpoint) Bräuchsten dringend hilfe dabei =) Danke [...]

  • Asus 3 Zellen oder 6 Zellen Akku Unterschied?
    Hallo!Was ist das denn welcher Unterschied bei einem 3 Zellen Akku oder 6 Zellen Akku! Also bei mir würd das Netbook sich reißen :) => ASUS Eee PC 1008P-BRN003S braun (90OA1PD42111A81E205Q) Preisvergleich &#124; Geizhals &Ouml;sterreich (;geizhals~at/a496188;html) Aber gibt es von Asus eig [...]

  • Wie mouseOver-Zellen bei Tabellen?
    Also, wie erstelle ich mouseOver-Zellen bei Tabellen? Ich hätte gerne, dass sich beom Mouseover die gesammte Zellfarbe ändert, und nicht nur der Link selbst. Am liebsten wäre es mir mit css oder php. Danke Arkangel [...]



raid-rush.ws | Imprint & Contact pr