Измените стиль DIV на клик и снова измените на unclick

Question

, поэтому у меня есть div с ID colormethis, и я хочу изменить стиль на клик и изменить его снова на unclick. Как в нем подсвечивается одним щелчком по переключателю, и щелчок снова будет оспаривать его. На радио сейчас не нужно снимать выделение, мне просто нужно поведение на 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> 

но он, похоже, не срабатывает вообще.

Что случилось?

Answer 1

fiddle Demo

CSS

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

JQuery

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

Использование класса активен, чем toggleClass с помощью JQuery

Answer 2

вы также можете использовать мышь вверх и вниз, если хотите.

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

Fiddle здесь http://jsfiddle.net/Qud9P/