Cambia e mantieni il colore di sfondo al clic - jquery, colori, sfondo

Sto avendo la seguente struttura su un sito web che sto costruendo:

<tr>

<td class="header link"><a href="x" >X</a></td>
<td class="header link"><a href="y" >Y</a></td>
<td class="header link"><a href="z" >Z</a></td>
<td class="header link"><a href="w" >W</td>

</tr>

Tutte le celle hanno inizialmente lo stesso colore di sfondo.

Quello che vorrei realizzare è il seguente:

Quando si fa clic su uno dei collegamenti, il colore di sfondo della cella contenente il collegamento cambia in un nuovo colore e rimane modificato, fino a quando non viene selezionato un altro collegamento.

Quando viene selezionato l'altro collegamento, il colore del collegamento selezionato per primo torna al colore originale, mentre la cella del collegamento appena selezionato cambia in nuovo colore.

Attualmente quello che ho in atto sta funzionando con la funzione hover:

$(document).ready(function()
{    $(function(){ $(".header").hover(function() {$(this).css("background-color", "#EBA521");},
function() { $(this).css("background-color", "#6F0000"); });
});
});

Come realizzo quanto sopra?

risposte:

1 per risposta № 1

Prova questo:

$(document).ready(function() {
$(".header.link a").click(function() {
$(".header.link a").css("background-color", "#6F0000");
$(this).css("background-color", "#EBA521");
$(this).data("bgColor", "#EBA521")
return false;
});
});

$(document).ready(function() {
$(function() {
$(".header.link a").hover(function() {
$(this).data("bgColor", $(this).css("background-color"));
$(this).css("background-color", "#EBA521");
}, function() {
$(this).css("background-color", $(this).data("bgColor"));
});
});
});

Esempio di lavoro: http://jsfiddle.net/Hbgz3/2/

---

0 per risposta № 2

È possibile utilizzare l'evento .click in un modo simile a quello utilizzato per la funzione .hover:

$(".header").click(function(){
//change color of this
//change color of all other .header elements to default color
});

---

0 per risposta № 3

Utilizza il gestore di clic anziché hover ()

$(function() {
$("a").click( function() {
$(".header.link").css("background-color", "#6F0000");
$(this).parent().css("background-color", "#EBA521");
});
});

---

0 per risposta № 4

Prova ad aggiungere il colore al link usando un valore-dati.

data-value="#ffcc00"

$(".header a").click(function() {
$(".header").css("background-color","#ffffff");
$(this).parent().css("background-color",$(this).attr("data-value"));
});

---