单击时更改DIV的样式,并在取消单击时再次更改

时间:2013-11-15 15:44:29

标签: javascript jquery html css

所以我有一个ID为colormet的div,我想在点击时更改样式并在unlick上再次更改。因为单击单选按钮会突出显示,然后再次单击将取消突出显示。收音机现在不必取消选择,我只需要DIV上的行为。我试过这个:

function highlightSelected() {
if ($i = 0 || $i = null){
$("#colormethis").css({"background-color":"#CC0000"});
$("#colormethis").css({"color":"#FFFFFF"});
$("#colormethis").css({"font-weight":"bold"});
$i = 1;
}
else if ($i = 1) {
$("#colormethis").css({"background-color":"#FFFFFF"});
$("#colormethis").css({"color":"#000000"});
$("#colormethis").css({"font-weight":"normal"});
$i = 0;
}
};

 <div id="colormethis" style="width:200px;border:1px #CC0000 solid;"><input onclick="highlightSelected()" id="button" type="radio" name="controller" value="random">Content here</div>

但它似乎根本没有发射。

怎么了?

2 个答案:

答案 0 :(得分:3)

fiddle Demo

<强> CSS

.active {
    background-color: #CC0000;
    font-weight:bold;
    color:#FFFFFF;
}

<强>的jQuery

$('#button').click(function () {
    $("#colormethis").toggleClass('active');
});

使用jQuery

使用活跃于toggleClass的类

答案 1 :(得分:0)

如果您愿意,也可以使用鼠标。

$("#div").mousedown(function () {
    $(this).css("background-color", "green");
}).mouseup(function () {
    $(this).css("background-color", "red");
});

在此处http://jsfiddle.net/Qud9P/