Jump to content
DinhoPHP

Três botões, quando um é selecionado, só este deve mudar de cor

Recommended Posts

Olá! Imagino que um tópico desse é vergonhoso, porém sou péssimo em Javascript e se fosse outra linguagem eu resolveria com loop, mas enfim. Tenho três botões que quando um é selecionado este muda seu background-color (até aí blz). Porém se eu clicar em outro o anterior permanece com o background-color alterado  até que o mesmo receba novamente o clique, substituindo assim, a classe css atual pela anterior, pois esse foi o único jeito que arrumei, mas o correto é que assim que um outro botão receba o clique, o anterior perca o seu "focus".

 

Javascript

function changeBgColor(element) {

    if(element.className === 'btn_clicado') {
        element.className = 'btn_desclicado';

    } else if (element.className === 'btn_desclicado'){
        element.className = 'btn_clicado';
    }

html

<div id="procura_cliente">
  
  <button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)" style="border-bottom-right-radius: 0px; border-top-right-radius: 0px;">Comprar</button>
  
  <button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)" style="border-bottom-left-radius: 0px;border-top-left-radius: 0px;border-bottom-right-radius: 0px; border-top-right-radius: 0px;">Alugar</button>
  
  <button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)" style="border-bottom-left-radius: 0px;border-top-left-radius: 0px;">Lançamentos</button>
  
  </div

 

Share this post


Link to post
Share on other sites

Olá. Experimente usar a biblioteca JQuery.

No CSS, coloque todos os estilos do botão na classe .btn. Na classe .ativo ajuste os estilos que sofrerão alterações quando clicado.

Exemplo abaixo.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
  .btn{
    background-color: #ddd;
  }

  .btn.ativo{
    background-color : #aff;
  }
</style>

<div id="procura_cliente">
  <button id="btn_categorias" class="btn">Comprar</button>
  <button id="btn_categorias" class="btn">Alugar</button>
  <button id="btn_categorias" class="btn">Lançamentos</button>
</div>

<script>
  $(document).ready(function(){
    $('.btn').click(function(){
      $('.btn').removeClass('ativo');
      $(this).addClass('ativo');
    })
  })
</script>

 

  • Obrigado! 1

Share this post


Link to post
Share on other sites
1 minuto atrás, Eziquiel disse:

Olá. Experimente usar a biblioteca JQuery.

No CSS, coloque todos os estilos do botão na classe .btn. Na classe .ativo ajuste os estilos que sofrerão alterações quando clicado.

Exemplo abaixo.

 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
  .btn{
    background-color: #ddd;
  }

  .btn.ativo{
    background-color : #aff;
  }
</style>

<div id="procura_cliente">
  <button id="btn_categorias" class="btn">Comprar</button>
  <button id="btn_categorias" class="btn">Alugar</button>
  <button id="btn_categorias" class="btn">Lançamentos</button>
</div>

<script>
  $(document).ready(function(){
    $('.btn').click(function(){
      $('.btn').removeClass('ativo');
      $(this).addClass('ativo');
    })
  })
</script>

 

Show Ezequiel!!!! Vou testar aqui e retorno com a resposta já! E muito obrigado por ser JQuery, pois pretendo aprende-la ao invéz do Javascript. Muito obrigado!

Share this post


Link to post
Share on other sites

Show Ezequiel! Muito, muito, muito, muito obrigado mesmo! Me ajudou a resolver algo bem solicitado pelo cliente, acredito que deva funcionar no mobile que terminei, porém faltou este efeito rs. Só fiz algumas adaptações devido a nomenclatura e funcionou apenas no mesmo arquivo HTML, segue o resultado:  (o administrador pode marcar como resolvido)

 

arquivo final

<script>

  $(document).ready(function(){
      $('.btn_formatado').click(function(){
          $('.btn_formatado').removeClass('btn_ativo');
          $(this).addClass('btn_ativo');
      });
  });
  
</script>

<div id="procura_cliente">
  
  <button id="btn_categorias" class="btn_formatado" style="border-bottom-right-radius: 0px; border-top-right-radius: 0px;">Comprar</button>
  
  <button id="btn_categorias" class="btn_formatado" style="border-bottom-left-radius: 0px;border-top-left-radius: 0px;border-bottom-right-radius: 0px; border-top-right-radius: 0px;">Alugar</button>
      
  <button id="btn_categorias" class="btn_formatado" style="border-bottom-left-radius: 0px;border-top-left-radius: 0px;">Lançamentos</button>
</div>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By asacap1000
      Galera me ajudem por favor, estou pirando kkkkk
       
      Seguinte, tenho um form que realiza o submit via javascrit enviando os dados para uma página php formatada em json.
      Está gravando perfeitamente porém preciso dos dados do retorno, como Link do boleto, e alguns outros resultados para inserir no banco nesse ponto já pesquisei um monte testei de tudo até a página bugar e nada kkkk
       
      o Script que utilizo para o envio é esse:
       
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#frmBoleto").submit(function(){ $.ajax({ type: "POST", url: "https://www.sitedaloja.com.br/action/boleto_bradesco/gerando_boleto.php", data: $(this).serializeArray(), }).done(function( msg ) { }); return false; }); </script> Como fazer para capturar os dados  da resposta do json?  
    • By Sapinn
      Salve salve! Nuca intendi como isso realmente funciona por isso gostaria da ajuda de vcs. Estou desenvolvendo um sistema de historias e acho que seria interessante no envio dessas historia além dos texto imagem ilustrativas, mais ou menos como blogs de noticias fazem, mas como posso enviar texto e imagem e depois retorna-los juntos? Eu sei com enviar imagens em php mas gostaria de enviar a imagem e o texto colocando ambos em um textarea acho que assim ficaria bem mais interessante alguém pode me ajuda?
       
    • By clickanapolis
      Boa tarde pessoal, desculpa se postei em lugar errado, mais não sei aonde postar essa minha dúvida. Estou finalizando um projeto que consiste em uma plataforma de processo seletivo e na etapa final os candidatos iram fazer uma prova online.
       
      O cliente me perguntou se é possível bloquear o navegador, tipo se ele sair do navegador ou mudar de aba tipo o sistema finalizar a prova do candidato, visto que o sistema irá identificar que ele foi fazer uma pesquisa.
       
      Eu particularmente não vi nada igual ate hj e não sei se existe algo seja em javascript ou qualquer outro modo de fazer isso.
    • By FilipeON
      Olá Sou iniciante em Javascript... Preciso de ajuda para a seguinte questão:
      Tenho duas FUNÇÕES e preciso executa-las de forma aleatória, já tentei de varias formas, mas sem sucesso, alguém pode me ajudar?
      Basicamente o que preciso é que toda vez que a pagina WEB for carregada uma das duas funções seja sorteada e executada.
       
      As funções são:
      function vt1(){fireEvent (document.getElementById('bt-1'), 'click');} function vt2(){fireEvent (document.getElementById('bt-2'), 'click');}
       
    • By Danilo - Jesus voltará!
      Olá, estou fazendo um cálculo de horas para cartão ponto em php e jquery... o cálculo do php já consegui um satisfatório. Preciso agora ao preencher os campos que são gerados dinamicamente de 1 a 31 que são os dias do mês, ao sair do campo Jornada (horas de trabalho), ele envie via ajax os valores preenchidos nesses 4 campos anteriores que são 4 inputs de tempo (time).
      Eu consegui recuperar individualmente, mas ele passa a chamada da função em todos, se dou um alert por exemplo ele percorre todos os campos dinâmicos para aí ir para o outro input, que no caso acontece a mesma coisa, segue o script que utilizei para pegar o valor do input individual, aí preciso que não percorra todos e pegue apenas o valor de cada um no onblur do campo jornada conforme está na figura e me retorne para os campos específicos com os dados que pegarei no php,. Espero ter sido claro, se alguém puder ajudar eu agradeço.
       
      $(document).ready(function() { $(":input").blur(function() { var id = $(this).attr('id'); var value = $(this).val(); alert(id + " " + " " + value); }); }); O que preciso está na figura abaixo:
       

       
      Aguardo, se alguém puder ajudar...agradeço
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.