Schimbare class dupa un :active

[djantonik]

Salut,
As dori sa stiu cum as putea face sa schimb design-ul la un div/class atunci dupa ce apas click pe el. Explicatie :

Cod: Selectaţi tot

.buton { background-color : red; border: 1px solid;}

as dori ca dupa ce dau click sa se schimbe background

Cod: Selectaţi tot

.buton { background-color : blue; } 

Daca as face cu .buton:active .... mi-ar schimba doar atat timp cat tin apasat. Ceea ce vreau eu e sa ramana "intr-un fel apasat". Ma gandesc ca nu e posibil doar din CSS, nu ma deranjeaza daca e si JavaScript. Dar as dori sa stiu.

Cu jQuery:

Cod: Selectaţi tot

$('#nume_id_div').click(function(){

$('nume div/clasa la care vrei sa schimbi').AddClass('noua_clasa');

});

Iar noua_clasa:

Cod: Selectaţi tot

.buton { background-color : blue; }

Cod: Selectaţi tot

<script>
$('#buton').click(function(){  $('#buton').AddClass('buton');});
</script>
<div id="buton">

</div>

iar CSS :

Cod: Selectaţi tot

#buton {
	width: 100px;
	height: 40px;
	background-color : red;
	border: 1px solid ;
}
.buton {
	background-color: blue;
}

e ceva gresit ?
Am inserat in fisierul index.php si

Cod: Selectaţi tot

<script src="jquery-1.7.1.js"></script>

Salut
O proprietate CSS la ID are precedenta mai mare decat la CLASS, ca sa o schimbi prin clasa, trebuie sa adaugi si ID-ul inaintea clasei.
Vezi exemplu asta:

Cod: Selectaţi tot

<div id="buton">www.coursesweb.net</div>
<script type="text/javascript"><!--
document.getElementById('buton').onclick = function() { this.className = 'buton'; }
--></script>

<style type="text/css"><!--
#buton {
   width: 150px;
   height: 40px;
   background-color : red;
   border: 1px solid ;
}
#buton.buton {
   background-color: blue;
}
--></style>

Mersi mult pentru ajutor. Pana la urma am rezolvato astfel :

Cod: Selectaţi tot

<div id="buton" onclick="ChangeColor();" class="invalid">Click here!</div>

<script type="text/javascript"><!--
function ChangeColor ()
{
	var color = document.getElementById('buton').className;
	if(color == "valid") { document.getElementById('buton').className = 'invalid'; }
	else { document.getElementById('buton').className = 'valid'; }
}
--></script>

<style type="text/css"><!--
#buton 
{
   width: 150px;
   height: 40px;
   border: 1px solid ;
}
.invalid 
{
	background-color: #DFDFDF;
}
.valid 
{
	background-color: #FFFFFF;
}
--></style>

Daca gasiti o metoda de optimizare pentru acest min-script, as fi recunoasctor daca mi-ati spuneo. Multumesc mult.