Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gladston Henrique

Alterar objeto ao clicar e quando re-clicar voltar ao normal

Por , em Javascript

Recommended Posts

Gladston Henrique    0

Gladston Henrique
Postado

Saudações a todos,

 

Sou bem leigo nesta linguagem, mas agora estou pronto para aprender.

Bem, surgiu-me uma dúvida meio chata que é a seguinte:

 

Como posso fazer o efeito de quando eu clicar em uma div ela colorir e ao clicar novamente ela voltar ao normal? Estou fazendo um projeto com um código bem simples em HTML, mas só preciso entender como fazer ela voltar ao normal após clicar.

 

Abraços a todos.

Gladston 417345506.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Com css. Você aplica uma classe css e depois remove ela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gladston Henrique    0

Gladston Henrique
Postado

Sim, com CSS... Mas no meu caso ao clicar sobre uma seta para abaixo um Mini-menu é aberto, mas quando clico novamente ele não fecha. Entendeu a questão que eu me encontro meu caro? :upset:

Já tentei de tudo e nada. E a proposito o Mini-Menu é feio a partir do .html.

 

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exemplo:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

<style>
#foo {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  border: 1px solid #000;
}
.is-clicked {
  background: #f00;
}
</style>
</head>
<body>


<div id="foo">
  click me
</div>

<script>
var $foo = document.getElementById('foo');
$foo.addEventListener('click', function() {
  if (this.classList.contains('is-clicked')) {
    this.classList.remove('is-clicked');
  } else {
    this.classList.add('is-clicked');
  }

});
</script>

</body>
</html>
clica uma vez: fica vermelho

clica de novo: volta ao normal (perde o bg vermelho)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito