通過超鏈接更改div背景顏色

Question

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

您需要解決兩個問題

1. 選擇器需要查找類bgcolor ，因此應該是.bgcolor
2. 可能需要通過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選擇器

---

請注意，jQuery 無法為開箱即用的顏色 設置動畫 ，您必須使用Color插件，或使用重載animate（）方法的jQuery UI來支持動畫顏色。

從.animate（）文檔 ：

... 大多數非數字屬性無法使用基本的jQuery功能進行動畫處理 （例如，寬度，高度或左邊可以設置動畫，但背景顏色不能 ，除非使用jQuery.Color（）插件）// /