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

Question

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

单击每个div时， javascript将更改elements的颜色 。

我想使用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");
    })
});

Answer 2

jQuery不能更改伪元素的样式

修复（我在主体中或其他位置使用<style>标记将.html()函数用于:focus的样式）：

<script>
    ...
    $(".submit").css("background","#ff0000");
    $("body style.changeColor").html("
        .submit:focus {background: #ea0202};
    ");
    ...
</script>
<body>
    <style class="changeColor">
    </style>
</body>

我就是您，我宁愿将所有其他.css()函数更改为.html()字符串内的文本。

$("body style.changeColor").html("
    ...
    .submit {background: #ff0000};
    .submit:focus {background: #ea0202};
");

Answer 3

您直接在元素上设置样式。 为什么不在元素上设置CSS类，并通过CSS处理所有更改。 那更干净，更容易使用。

例如。 单击“ #green”时，将一个类“ Green”添加到提交按钮。 （请参阅http://api.jquery.com/addClass/ ）（确保删除其他类）

然后，在CSS中，您可以设置＃MySubmitButton.Green {..您的绿色样式..}并使用您喜欢的所有伪CSS类。 ＃MySubmitButton.Green：hover {color：＃FF00FF;}之类的东西

希望这可以帮助...

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

问题描述

3 个解决方案

解决方案1
2 已采纳 2014-04-22 10:17:18

解决方案2
1 2014-04-22 10:11:38

解决方案3
1 2014-04-22 10:16:20

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2014-04-22 10:17:18

解决方案2 1 2014-04-22 10:11:38

解决方案3 1 2014-04-22 10:16:20

解决方案1
2 已采纳 2014-04-22 10:17:18

解决方案2
1 2014-04-22 10:11:38

解决方案3
1 2014-04-22 10:16:20