Javascript 改变 div 的颜色，然后改变 div 焦点的颜色

Question

我正在制作一个 html 论坛并使用 javascript 更改论坛的颜色，我有三个 div，一个是蓝色、绿色和红色。

当点击每个 div 时，javascript 将改变元素的颜色。

我想用 javascript 中的 .css() 函数更改提交按钮焦点的颜色，但是焦点部分不起作用。

这是我的javascript代码:

$("#green").click(function() {
    $(".mailheader").css("background","#a3d300");
    $(".submit").css("background","#a3d300");
    $(".submit:focus").css("background","#98cf00");
});
$("#blue").click(function() {
    $(".mailheader").css("background","#00b4ff");
    $(".submit").css("background","#00b4ff");
    $(".submit:focus").css("background","#04a6e9");
});
$("#red").click(function() {
    $(".mailheader").css("background","#ff0000");
    $(".submit").css("background","#ff0000");
    $(".submit:focus").css("background","#ea0202");
});

所以我尝试了 $(".submit:focus").css("background","#ea0202"); 来改变焦点的背景，但它不起作用.有人知道怎么修这个东西吗？谢谢

Answer 1

检查这个

DEMO

HTML

<div class="mailheader"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
<input type="button" value="submit" class="submit" />

CSS

#green, #red, #blue {
    height:50px;
    width:100px;
}
#green {
    background-color:green;
}
#red {
    background-color:red;
}
#blue {
    background-color:blue;
}

jQuery

$("#green").click(function () {
    $(".mailheader").css("background", "#a3d300");
    $(".submit").css("background", "#a3d300");
    $(".submit").focus(function () {
        $(".submit").css("background", "#04a6e9");
    })
});
$("#blue").click(function () {
    $(".mailheader").css("background", "#00b4ff");
    $(".submit").css("background", "#00b4ff");
    $(".submit").focus(function () {
        $(".submit").css("background", "#ea0202");
    })
});
$("#red").click(function () {
    $(".mailheader").css("background", "#ff0000");
    $(".submit").css("background", "#ff0000");
    $(".submit").focus(function () {
        $(".submit").css("background", "#98cf00");
    })
});