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 Rasp
      Fala galera! Estou com a seguinte situação e queria uma ajuda de pôr onde seguir o meu raciocínio para resolver:
       
      Possuo um array X com dados que vem do meu backend, exemplo:
       
      array = [ 0: [1, 'Banana', '3.00', '...'], 1: [2, 'Maça', '4.00', '...'], 2: [3, 'Abacaxi', '5.00', '...'] ];
      Monto para o usuário uma tela com a tabela desses dados, com informações resumidas e um botão "detalhar" para exibir o conteúdo em um modal:
       
      | ID | Fruta | Preço| Ação | | 1 | Banana | 3.00 | Detalhar | | 2 | Maça | 4.00 | Detalhar | | 3 | Abacaxi| 5.00 | Detalhar | Até aí tudo certo, funciona redondo. Mas preciso fazer com que ao abrir o modal, independente do registro que cliquei (ID 1, 2 ou 3), eu possa "navegar" entre os outros registros no modal (possuo botões para isso) sem precisar sair do modal, como se fosse uma paginação.
       
      Como poderia construir essa lógica?
    • By Matheus Bispo
      Bom dia.
       
      Estou com uma situação, tenho um Objeto chamado parametros.params.
       
      Dentro deste objeto, pode vir 1 item ou 2 item ou 3 item, enfim, N itens.
       
      Exemplo:
       
      Parametros.params{
      carro: "Gol"
      };
       
      ou
       
      Parametros.params{
      modalidade: "Futebol",
      duracao: 90
      };
       
      Percebem que os nomes dos itens, os valores e a quantidade mudaram, isso é o que acontece no meu caso. Continuando...
       
      Tenho 2 funções:
       
      function chamarmetodo1(argument1, argument2){};
       
      function chamarmetodo2(argument){};
       
      Existe algum método de eu criar algo parecido com isso
       
      chamarmetodo1(parametros.params);
       
      chamarmetodo2(parametros.params);
       
      Ou seja, gostaria de chamar o método que for, indiferente de quantos parâmetros ele espera, e com os itens que vem dentro do meu objeto parametros.params, tem como fazer isso?
       
       
    • By bruno153
      Pessoal, 
       
      preciso super de uma ajuda com o seguinte problema, eu preciso transformar com o javascript um JSON dessa forma:

      {
        "registros": {
          "valores": [
            {
              "label": "DANILO KATHSON BILRO DE SOUZA",
              "data": [
                {
                  "realizado": "96.51"
                },
                {
                  "realizado": "94.58"
                },
                {
                  "realizado": "89.99"
                },
                {
                  "realizado": "93.38"
                }
              ]
            },
            {
              "label": "FRANCISCO GEILSON RAMALHO",
              "data": [
                {
                  "realizado": "88.94"
                },
                {
                  "realizado": "95.95"
                },
                {
                  "realizado": "94.20"
                },
                {
                  "realizado": "92.36"
                }
              ]
            }
          ]
        }
      }
       
      Para que ele fique dessa forma:

      {
        "registros": {
          "valores": [
            {
              "label": "DANILO KATHSON BILRO DE SOUZA",
              "data": ["96.51", "94.58", "89.99", "93.38"]
              ]
            },
            {
              "label": "FRANCISCO GEILSON RAMALHO",
              "data": ["88.94", "95.95", "94.20", "92.36"
              ]
            }
          ]
        }
      }

      poderiam me dar um caminho de como eu poderia fazer isso?

      Desde já, agradeço muito pelo atenção.
    • By carlosmassam
      Bom dia a todos. Eu tenho o seguinte código em HTML
      <input type="checkbox" id="checkmarcacao1" name="checkmarcacao1" value="checkmarcacao1"> <input type="time" id="hora101" name="hora101" disabled="disabled"> E tenho o seguinte código em Javascript
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { $('input[name=checkmarcacao1]').change(function() { if ($(this).is(':checked')) { $('input[name=hora101]').removeAttr('disabled'); } else { $('input[name=hora101]').attr('disabled',true); } }); }); </script> Esse meu código em Javascript faz o seguinte: Quando meu Checkbox está marcado, ele habilita o input time. Se eu desmarcar o checkbox, o input time é desabilitado.
      Acontece que se eu marcar o checkbox, escrever no input time, por exemplo: 12:34, depois desmarcar o checkbox o  input time fica desabilitado porém o valor 12:34 ainda fica escrito nele.
      Eu gostaria de saber como apagar o valor do input time quando o checkbox estiver desmarcado. 
       
      Quem quiser testar o código segue o link: https://jsfiddle.net/o8f3zvqu/
    • By gamesmax2
      Boa tarde,
      Pessoal estou com uma dificuldade no MYSQL, estou querendo obter dados de um cadastro caso ele tenha preenchido todos os Campos, tentei usar o Group by mas não tive sucesso.
       
      Minha tabela e a seguinte:
       
      Nome.              Pedido.            Status
      Daniel.              9955.                 Ok
      Daniel.              9954                  Ok
      Rafael.              9940                  Ok
      Rafael.              9941.                 Aberto
      Rafael.              9942.                 Ok
      Rodrigo.            9961.                 Ok
      Rodrigo.            9962.                 Ok
       
       
      Meu objetivo e puxar os nomes que estão com todos o pedidos relacionado em ok, no caso o Rafael não pode aparece pois ele tem um pedido Aberto, porém não conseguir fazer isso, pessoal peco a ajuda de VCS muito o obrigado.
       
      tentei isso aqui: SELECT nome, pedido, status FROM `cadastros` GROUP BY pedido, nome ORDER BY having status = 'Ok'  
       
×

Important Information

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