Zmień i zachowaj kolor tła w kliknięciu - jquery, kolory, tło

Mam następującą strukturę na stronie, którą tworzę:

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

Wszystkie komórki mają początkowo ten sam kolor tła.

To, co chciałbym osiągnąć, to:

Po kliknięciu dowolnego łącza kolor tła komórki zawierającej łącze zmienia się na nowy kolor i pozostaje zmieniany, dopóki nie zostanie wybrany inny link.

Po wybraniu drugiego łącza kolor pierwszego wybranego łącza zmienia się z powrotem na pierwotny kolor, a komórka nowo wybranego łącza zmienia się na nowy kolor.

Obecnie mam aktywną funkcję aktywowania:

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

Jak mogę osiągnąć powyższe?

Odpowiedzi:

1 dla odpowiedzi № 1

Spróbuj tego:

$(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"));
});
});
});

Przykład roboczy: http://jsfiddle.net/Hbgz3/2/

---

0 dla odpowiedzi nr 2

Możesz użyć zdarzenia .click w podobny sposób, jak w przypadku funkcji .hover:

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

---

0 dla odpowiedzi № 3

Użyj modułu obsługi kliknięć zamiast hover ()

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

---

0 dla odpowiedzi nr 4

Spróbuj dodać kolor do łącza za pomocą wartości danych.

data-value="#ffcc00"

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

---