Question

Hello Stackoverlowers！

我需要整理我的div并确保在关闭某些超链接时div的背景颜色发生变化。

我的JS标记是：

<script>
$("bgcolor").click(function(){
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");}
);
}

我的HTML是：

<div id="blackandwhite"> text here </div>

我的CSS是：

#blackandwhite { width:100%; #FFFFFF; }

我用来触发div改变颜色的链接结构是这样的：

<li><a href="#secondpagename" class="bgcolor"> link text </a></li>

真的无法解决为什么它不起作用，并会感激任何和所有的帮助！我觉得我快到了。

我想做的就是让超链接更改div背景。此超链接也将保留在div之外。有什么想法吗？

Answer 1

您需要解决两个问题

选择器需要查找类bgcolor，因此应该是.bgcolor
可能需要通过e.preventDefault()阻止超链接的默认操作。不是100％肯定你的意图，但如果它只是改变颜色而不是跳进页面，那么这很可能是你想要的。

请尝试以下

$(".bgcolor").click(function(e) {
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");
    e.preventDefault()
});

修改

正如其他人指出的那样，jQuery不支持开箱即用的动画。它确实支持通过css直接更改颜色

$("#blackandwhite").css(backgroundColor: '#000000');

如果你真的想要彩色动画，虽然有很多插件可用。例如

http://www.bitstorm.org/jquery/color-animation/

Answer 2

您忘记了点：.bgcolor

$(".bgcolor").click(function(){
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");}
);
}

除此之外，我认为它应该有用。

Answer 3

jQuery不支持“开箱即用”的彩色动画。只能为“数字”属性设置动画。您仍然可以“直接”设置背景颜色，而无需动画。

$(".bgcolor").click(function(){
    $("#blackandwhite").css(backgroundColor: '#000000');
});

如果您仍想要设置颜色动画，可以尝试使用此插件：http://www.bitstorm.org/jquery/color-animation/

Answer 4

您的选择需要以点为前缀，以选择具有匹配类而不是匹配标记名称的元素：

$(".bgcolor").click(function(){
    $("#blackandwhite").animate(
        {backgroundColor: '#000000'},
        "slow");}
);
}

Answer 5

点击功能的标识符不正确。它应该是：

$(".bgcolor").click(function(){
);

注意点表示它正在搜索一个类。此外，脚本需要放在元素之后，或放在document.ready()标记中。

Answer 6

首先，您尝试通过css类进行选择。正确的选择器语法是.<classname>。因此，用于绑定click事件的选择器应为：

$(".bgcolor")

jQuery selectors

请注意jQuery 无法动画颜色开箱即用，您必须使用Color插件，或使用jQuery UI重载animate（）方法来支持动画色彩。

来自.animate() documentation：

... 大多数非数字属性无法使用基本jQuery功能进行动画处理（例如，宽度，高度或左侧可以设置动画，但背景颜色不能< / strong>，除非使用了jQuery.Color（）插件）///

通过超链接更改div背景颜色

6 个答案: