Alterar css quando clickar na div

[LuqYYY 1]

Galera é o seguinte tenho esse código aqui:

 

Preciso que quando clicar na div altere a class <div class="overlay"> para <div class="overlayon">.

 

Não sei como fazer isso alguem pode me ajudar?

<div class="col-md-3 col-xs-6 item acessories">
 
 
<a href"#">
 
<div class="work-image">
 
<div class="overlay">
 
<div class="overlay-inner">
 
<h4>COOKING OIL BAG</h4>
 
<span>Metal Bag out of cooking oil can, coffin handle, trunk lock rests of material being the first and the only one.</span>
 
</div>
 
</div>
 
<img src="images/works/acessories/1.jpg" alt="">
 
</div>
 
</a>
 
</div> 

[lokaodomau 61]

Por jQuery pode usar toggleClass():

$('div.overlay').click(
  $(this).toggleClass('overlayon');
);

[LuqYYY 1]

Não consegui assim :S

[Marcelo Lipienski 9]

antes da tag </body> use

<script type="text/javascript">
    document.querySelector('.overlay').className += ' on';
</script>

a técnica recomendada é adicionar uma classe, ao invés de substituir, assim você mantém a semântica do código.

[LuqYYY 1]

Mais eu quero que apenas fique com overlayon como class quando clicar por cima da div.

[Marcelo Lipienski 9]

Então pega o código que eu forneci, leia com atenção e veja onde você precisa alterar para substituir a classe, ao invés de apenas adicionar uma nova.

[LuqYYY 1]

Consegui, obrigado!

[Mauro JuniorDev 0]

Só complementando, se quiser usar no jquery:

 

$('.sel').addClass('.on');