Ir para conteúdo
  • 0
Rafael Guia

Como fazer com que um botão mude de cor ao ser clicado e volte a cor original após se clicado novamente?

Pergunta

Olá galera, boa tarde!

 

Alguém pode me ajudar?

Gostaria de clicar no link (que estou utilizando como botão) e que ele mudasse de cor, porém ao clicar novamente, preciso que ele volte a cor normal. 

Ps.: Não tenho como usar jQuery.

 

Segue o código:

 

Utilizei "onDblClick", mas não ficou bom, preciso dar apenas 1 click para voltar a formatação normal.

 

<tr>
      <td width="70%" class="tt">CPF</td>
      <td width="30%"><a href="#vazio" class="check" onClick="this.className='active'" onDblClick="this.className='check'">OK</a></td>
    </tr>

 

 

Grato,

Editado por Alaerte Gabriel
Adição da tag CODE

Compartilhar este post


Link para o post
Compartilhar em outros sites

3 respostas a esta questão

Recommended Posts

  • 1

Cria uma variável de controle 0,1

 

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>

<body>

<a href="#" id="demo" class="button" onclick="myFunction()">Link Button</a>

<script>
var controle = 0;
function myFunction() {
    
    if(controle ==0){
    	document.getElementById("demo").style.background = "blue";
        controle++;
        }
    else{
    	document.getElementById("demo").style.background = "green";
        controle--;
        }
}
</script>

</body>
</html>

 

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0

Olha só este exemplo abaixo.

Usando o "classList.toggle", a classe "ok" será incluída caso não exista no elemento, e será retirada caso exista.

Ela irá sofrer uma inversão.

<tr>
   <td width="70%" class="tt">CPF</td>
   <td width="30%">
     <a href="#vazio" class="check" onclick="this.classList.toggle('ok')" >OK</a>
  </td>
</tr>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0
Em 11/01/2018 at 16:49, kim.y disse:

Cria uma variável de controle 0,1

 


<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>

<body>

<a href="#" id="demo" class="button" onclick="myFunction()">Link Button</a>

<script>
var controle = 0;
function myFunction() {
    
    if(controle ==0){
    	document.getElementById("demo").style.background = "blue";
        controle++;
        }
    else{
    	document.getElementById("demo").style.background = "green";
        controle--;
        }
}
</script>

</body>
</html>

 

boa tarde parceiro de programação, to terminando meu tcc em programação web e seu código me ajudou em parte, eu preciso mais de um botão pra fazer essa mesma função, explicando melhor, cada botão teria que funcionar independente com a mesma função aplicada no seu código para um botão, mas no meu caso em mais de um. teria como me ajudar ? abraços 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Incompetech
      Então.. a um tempo atrás eu fiz um post pedindo ajuda em relação a tooltip mas não obtive resposta, então decidi deixar essa funcionalidade para depois.
      Como disse na minha primeira pergunta eu estou praticando HTML / CSS / JS ... então comecei a fazer uma entrada para MU ONLINE que foi um dos jogos que mais joguei em épocas de LAN HOUSE. Então o que quero perguntar a vocês é o seguinte:

      Como podem ver nessa imagem acima ela tem um total de 10 itens que são icones pequenos que ao clicar neles logo ele irá dar loading na foto do item completo, gostaria de saber como fazer isso.
       
      No meu caso eu criei essa entrada no Photoshop: 
       
      E no caso gostaria de fazer a mesma coisa porém clicando nas setas que estão do lado da box como podem ver no centro da imagem.
      Para isto eu devo usar Js? E qual código devo usar, eu sou super perdido com Js.
      Agradeço desde já! :D

    • Por Artes Ussler
      Olá!
       
      Como eu faço uma barrinha abaixo do texto como essa da imagem apenas usando CSS?
       

    • Por JGD
      Supondo que tenho um input name = dataHoraINI...
      Este input tem o  valor/value =  21/03/2019 09:00 
      Chamo a função abaixo pelo <button...:
       
      <button class="btn btn-primary" onclick="popdataJGD('dataHoraINI','pop1',document.getElementById('dataHoraINI').value)"> <i class="glyphicon glyphicon-calendar"></i> </button>  
      São 03 parâmetros: popdataJGD(objeto, div, value).. Sendo o 3º: data + hora.
       
      Observar que passo para a função o 3º parâmentro assim: document.getElementById('dataHoraINI').value
      Como poderia passar este 3º paramentro como string e inline a data e hora ???
       
      Qual diferença entre: 
      document.getElementById('dataHoraINI').value E
      this.value E/Ou ainda.
      var data_hora = "21/03/2019 09:00" Neste caso : popdataJGD(objeto, div, data_hora)... Observar no code acima a questão das aspas simples.
       
      Agradeço qualquer ajuda conceitual
       
    • Por Guga Alves
      Olá, estou enfrentando um problema no qual não tinha tido contato até então.

      Alguns textos em uma landing que estou trabalhando simplesmente não exibidos ou apresentam erros na exibição.

      Gostaria de saber se alguém já enfrentado esse problema poderia me ajudar com isso.

      Abaixo segue imagens dos erros
       
       
       


    • Por Incompetech
      Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:
       
      Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.
      Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.
      Abaixo vão alguns exemplos:
      Efeito aplicado em um projeto HTML: 

      O mesmo efeito In Game:
       
      Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.
×

Informação importante

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