jquery - 单击时更改并保持背景颜色

Question

我正在构建的网站具有以下结构:

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

所有单元格最初都具有相同的背景颜色。

我想要完成的任务如下:

单击任何链接时，包含该链接的单元格的背景颜色将更改为新颜色并保持更改状态，直到选择另一个链接。

当选择另一个链接时，第一个选择的链接的颜色将变回原始颜色，而新选择的链接的单元格将更改为新颜色。

目前我所拥有的是工作悬停功能:

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

如何实现上述目标？

Answer 1

试试这个:

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

工作示例:http://jsfiddle.net/Hbgz3/2/