Umfärbung von 2 Buttons

[Gunnar Bittersmann]

@@Martina:

nuqneH

Ich habe 2 Buttons

Nicht wirklich. Du hast 2 span-Elemente. Die mögen vielleicht wie Buttons aussehen, sind aber keine für Nutzer, die nicht sehen können. Dazu wäre zumindest ein ARIA-Attribut nötig: <span role="button" …>.

Aber warum nimmst du keine button-Elemente?

Oder Radiobuttons? Mir scheint, das ist das, was du vorhast: einer soll gewählt sein, der andere nicht:

<input type="radio" id="knopf1" name="knopf"/><label for="knopf1">Knopf 1</label>  
<input type="radio" id="knopf2" name="knopf"/><label for="knopf2">Knopf 2</label>

Die Radiobuttons kannst du mit CSS verstecken und die Label je nach Zustand des zugehörigen (unsichtbaren) Radiobuttons stylen:

[name="knopf"] + label { /* gemeinsame Styles und Style für nicht angewählt */ }  
[name="knopf"]:checked + label { /* Style für nicht angewählt */ }

Und schon brauchst du gar kein JavaScript mehr.

<span id="knopf1" style="cursor:pointer; background-image: linear-gradient(#dfd, #7f7);"

Das geht nur in Browsern, die Gradienten bereits präfixfrei unterstützen (IE 10, Firefox, Opera).

Die Gradienten sollten im Stylesheet stehen (wo sie hingehören), nicht im JavaScript (welches auch nicht ins HTML gehört).

Per JavaScript könntest du die Zuständsänderung bspw. per Umschalten von Klassen kenntlich machen, die Styles dafür stehen im CSS.

Aber wie gesagt, JavaScript sollte gar nicht erforderlich sein.

Qapla'