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

[DinhoPHP 1]

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

 

[Eziquiel 96]

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>

 

[DinhoPHP 1]

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!

[DinhoPHP 1]

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>