单击时更改并保持背景颜色答案

【问题标题】：Change and keep background color on click单击时更改并保持背景颜色
【发布时间】：2011-09-25 05:49:04
【问题描述】：

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

<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'); });  
 });
 });

我该如何完成上述任务？

【问题讨论】：

我不知道这是否是在将它放在 SO 上时发生的意外，但是您的 $(document).ready() 和 $(function(){ 做同样的事情，并且将它们嵌套在彼此内部可能会导致问题。

标签： jquery colors background

【解决方案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/

【讨论】：

还有让我意识到css 也有(property, value) 语法。我一直在使用地图。
感谢您的回答！这个解决方案似乎干扰了我的悬停功能 - 悬停停止工作。是否有可能保持这两种效果 - 悬停和更改并保持点击效果而不相互覆盖？
@Veni：更新了答案。请查一下
谢谢！使用上面的代码现在使悬停功能仅在单击事件发生之前才起作用。之后，只有点击更改颜色有效，没有悬停。
这正是我想要的效果！非常感谢您的帮助！

【解决方案2】：

您可以像使用 .hover 函数一样使用 .click 事件：

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

【讨论】：

【解决方案3】：

使用点击处理程序而不是 hover()

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

【讨论】：

感谢您的回答！这个解决方案似乎干扰了我的悬停功能 - 悬停停止工作。是否可以保留两种效果 - 悬停和更改并保持点击效果？
是的，两个事件处理程序应该能够同时共存。
真正的问题是悬停的mouseout功能仍然存在，这意味着当鼠标离开时颜色将恢复为#6F0000值。

【解决方案4】：

尝试使用数据值向链接添加颜色。

data-value="#ffcc00"

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

【讨论】：