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

2 respostas a esta questão

Recommended Posts

  • 0

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

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 Vanessa Andrade
      Olá.
      Preciso de ajuda, como faço para alterar a imagem que é apresentada no meu site através do código css.
      Minha loja é na tray, aparece dessa forma o editor 
      Não sei em qual pasta entro para eliminar e trocar essas imagens de patinhas e do carrinho de compra

      aguardo obrigada
    • Por Melkis
      Estou com um grande problema tenho imagens irregulares preciso recorta-las e salvar em um outro arquivo, até aí tudo bem, o problema é que o sistema que estou criando é totalmente responsivo, e o script abaixo delimita o tamanho da imagem, o script está cortando, salvando aimagem em png, tudo está funcionando perfeitamente, o único problema é ele não se adequar responsivo, quem souber como posso pegar os eixos x e y atuais da tela e coloca-los dentro das variáveis que fazem, pois tentei o .resize mas não deu certo, Aguardo anciosamente a resposta, muito obrigado seguem os links para que possam entender o eu eu estou querendo fazer:
      Para terem uma ideia melhor do que estou falando segue o link de um site com cropper.js em quadros e responsivo: https://fengyuanchen.github.io/cropperjs/
      E aqui o link com exemplo de crop poligonal, https://netplayer.gr/crop/
      //funçao para fazer um crop na imagem $(document).ready(function() { var condition = 1; var points = [];//holds the mousedown points var canvas = document.getElementById('myCanvas'); this.isOldIE = (window.G_vmlCanvasManager); $(function() { // if (document.domain == 'localhost') { if (this.isOldIE) { G_vmlCanvasManager.initElement(myCanvas); } var ctx = canvas.getContext('2d'); var imageObj = new Image(); function init() { canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mousemove', mouseMove, false); } // Draw image onto the canvas imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); }; imageObj.src = "img.png"; // Switch the blending mode ctx.globalCompositeOperation = 'destination-over'; //mousemove event $('#myCanvas').mousedown(function(e) { if (condition == 1) { ctx.beginPath(); $('#posx').html(e.offsetX); $('#posy').html(e.offsetY); } }); //mousedown event $('#myCanvas').mousemove(function(e) { if (condition == 1) { if (e.which == 1) { var pointer = $('<span class="spot">').css({ 'position': 'absolute', 'background-color': '#000000', 'width': '5px', 'height': '5px', 'top': e.pageY, 'left': e.pageX }); //store the points on mousedown points.push(e.pageX, e.pageY); //console.log(points); ctx.globalCompositeOperation = 'destination-out'; var oldposx = $('#oldposx').html(); var oldposy = $('#oldposy').html(); var posx = $('#posx').html(); var posy = $('#posy').html(); ctx.beginPath(); ctx.moveTo(oldposx, oldposy); if (oldposx != '') { ctx.lineTo(posx, posy); ctx.stroke(); } $('#oldposx').html(e.offsetX); $('#oldposy').html(e.offsetY); } $(document.body).append(pointer); $('#posx').html(e.offsetX); $('#posy').html(e.offsetY); }//condition }); $('#crop').click(function() { condition = 0; // var pattern = ctx.createPattern(imageObj, "repeat"); //ctx.fillStyle = pattern; $('.spot').each(function() { $(this).remove(); }) //clear canvas //var context = canvas.getContext("2d"); //Delimita o tamanho da imagem isso já retira a base responsiva da imagem ctx.clearRect(0, 0, 600, 600); ctx.beginPath(); ctx.width = 350; ctx.height = 350; ctx.globalCompositeOperation = 'destination-over'; //draw the polygon setTimeout(function() { //console.log(points); var offset = $('#myCanvas').offset(); //console.log(offset.left,offset.top); for (var i = 0; i < points.length; i += 2) { var x = parseInt(jQuery.trim(points[i])); var y = parseInt(jQuery.trim(points[i + 1])); if (i == 0) { ctx.moveTo(x - offset.left, y - offset.top); } else { ctx.lineTo(x - offset.left, y - offset.top); } //console.log(points[i],points[i+1]) } if (this.isOldIE) { ctx.fillStyle = ''; ctx.fill(); var fill = $('fill', myCanvas).get(0); fill.color = ''; fill.src = element.src; fill.type = 'tile'; fill.alignShape = false; } else { var pattern = ctx.createPattern(imageObj, "repeat"); ctx.fillStyle = pattern; ctx.fill(); var dataurl = canvas.toDataURL("image/png"); //upload to server (if needed) var xhr = new XMLHttpRequest(); // // xhr.open('POST', 'upload.php', false); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var files = dataurl; var data = new FormData(); var myprod = $("#pid").val(); data = 'image=' + files; xhr.send(data); if (xhr.status === 200) { console.log(xhr.responseText); $('#myimg').html('<img src="upload/' + xhr.responseText + '.png"/>'); } } }, 20); }); // } }); }); Para interessados em testar é só adicionar as tags: <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>   e colocar um <canvas> no <body> da pagina:   <canvas id="myCanvas"></canvas>   Desde já Muito Obrigado a todos   javascript canvas jcrop  
    • Por TUAN
      ola galera boa tarde a todos 
      gostaria de uma informação teria mais botão personalizado do Bootstrap
      ou alguma maneira de colocar para que eu possa usar para cada nome com cor diferente
      tentei usar dessa forma ai não aparecer a cor no botão
       
      //DestaqueSN function DestaqueSN($Destaque){ if ($Destaque == '1') { echo '<span class="btn btn-danger">Básico</span>'; } elseif ($Destaque == '2') { echo '<span class="btn btn-bronze">Bronze</span>'; } if ($Destaque == '3') { echo '<span class="btn btn-slate-gray">Prata</span>'; } elseif ($Destaque == '4') { echo '<span class="btn btn-golden">Ouro</span>'; } if ($Destaque == '5') { echo '<span class="btn btn-amethyst">Diamante</span>'; } elseif ($Destaque == '6') { echo '<span class="btn btn-burgundy">Master</span>'; } if ($Destaque == '7') { echo '<span class="btn btn-caramel">Vip</span>'; } elseif ($Destaque == '8') { echo '<span class="btn btn-info">Mega Vip</span>'; } if ($Destaque == '9') { echo '<span class="btn btn-success">Plus Master</span>'; } elseif ($Destaque == '10') { echo '<span class="btn btn-dark">Gra Master</span>'; } }       
    • Por Conrado Mirto
      Estou Com Problema em Ler o Corpo do Modal, o Erro esta marcado com alert("ERRO AQUI"); PRINT DO ERRO
       
       
      insaneservers.js
      $(document).ready(function () { $("#formVIPBRONZE").click(function() { $("#formVIP_Bronze").modal("show"); // $.ajax({ url:"boxBronze_inicio.php",dataType:"json", method:"GET", data: {}, success: function(data) { if(data.hasError == false) { $("#abrir_box_bronze").html(data.corpo_inicio); $("#proxima_ir_cadastro_bronze").click(function() { $.ajax({ url:"boxBronze_cadastro.php",dataType:"json", method:"GET", data: {}, success: function(datac) { if(data.hasError == false) { $("#abrir_box_bronze").html(datac.cadbronze); $("#TitleBronze").html("Cadastro VIP [2/2]"); } else{ alert("ERRO!\n"+data.msgErro); } }, error: function(){ alert("ERRO 1"); } }); }); } else{ alert("ERRO!\n"+data.msgErro); } }, error: function(){ alert("ERRO AQUI"); } }); }); }); boxBronze_inicio.php
      <?php require "insane.php"; $insane = new insane(); $html = ' <div id="infoBronze"> <center><b>Termos do Servidor </b><br></center> Vantagens Extras <br> <small>* Eventos Exclusivos Para Vip </small><br> <small>* Suporte Exclusivo </small><br> <small>* Sala no TS³</small><br><br> Informacoes <br> <small>* Reembolso de VIP Somente Quando Servidor Fechar/Falir. </small><br> <small>* VIP Podem Ser Pausado Apenas 1 Vez </small><br> <small>* Maximo 2 Vip Por Conta </small><br> <small>* VIP Valera por 31 Dias </small><br> <small>* Nao Vendemos Kits Diferentes dos Abaixo </small><br><br> Apos Wipe <br> <small>* Kits VIP"s Serao Liberado as 00:00 </small> <br><br> Ativar Vip <br> <small>* Contate um Admistrador no TS3 ts3.globalservidores.com.br </small><br> <small>* Procurar por Mirtin ou Peixoto no Servidor </small><br> <small>* Envie Um Email Com Todos as Informacoes <a href="#">ATIVAR VIP</a> </small><br> <hr> <input type="button" value="Proximo" class="btn btn-primary btn-block" id="proxima_ir_cadastro_bronze"> </div> '; $insane->setSaida("corpo_inicio", $html); $insane->fim(); ?>  
      boxBronze_cadastro.php <?php session_start(); require "insane.php"; // VOCÊ IRA PUCHAR O ARQUIVO INSANE.PHP AQUI move os box para pasta boxs $insane = new insane(); // action="processa/processa_cadcompvip.php" $cadbronze = ' <div class="alert alert-success"> <b>Atenção</b> <Br>Você Esta Cadastrando Sua Conta Para a ,Como: Comandos, Eventos, Dicas, Suporte Mais Rapido e Etc </div> <form method="post" action="processa/processa_cadcompvip.php" enctype="multipart/form-data"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label>Nick:</label> <input name="vip_nick" type="text" class="form-control input-sm" placeholder="Digite seu Nick" required> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <label>Email:</label> <input name="vip_email" type="email" class="form-control input-sm" placeholder="Digite seu Email" required> </div> </div> </div> <div class="form-group"> <label>Senha:</label> <input type="password" class="form-control" name="vip_senha" placeholder="Sua Senha Para Acessa o (Painel VIP)" required> </div> <div class="form-group"> <label>Sua Steam</label> <input type="text" class="form-control" name="vip_steam" placeholder="Sua Steam Para Nao Houver nenhum Problema" required> </div><hr> <input type="submit" value="Concluir e Pagar" class="btn btn-success btn-block"> </form>'; $insane->setSaida("boxBronze_cadastro", $cadbronze); // PRIMEIRAMENTE DEFINIMOS A SAIDA EM JSON, LOGO APOS TEMOS O NOME QUE IRA SAIR PARA QUE você REQUISITE NO AJAX, E LOGO DPS REPASSAMOS O ARQUIVO QUE IRA APARECER. $insane->fim(); ?>  
    • Por rafab
      Olá. Realizei o download do node.js, porém, quando vou acessar a versão através node - v ou node --version, aparece a mensagem node is not defined. 
      Todos os comandos que escrevo, como por exemplo o clear, aparece o erro clear is not defined. Gostaria de saber como posso resolver esse problema. 
×

Informação importante

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

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: