Skip to main content
formatação
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Se continuar optandoComo parece que vc está usando Bootstrpa pelas classes dos elementos, Vc pode optar pelo próprio jQuery que vc poderiajá deve ter no projeto e fazer dessa forma:

$(document).ready(function(){
  $("button").click(function(){
      $("button").removeClass("buttonClicked");
      $(this).addClass("buttonClicked");
  });
});
.button-group{
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-group > button {
    box-shadow: none;
    border: 1px solid #cecece;
    background: #ffffff;
    padding: 10px;
    cursor: pointer;
    margin: 5px;
}

.buttonClicked {
    background-color: #628cea !important;
    color: #fff;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="button-group">
    <button>PRIMEIRO BOTÃO</button>
    <button>SEGUNDO BOTÃO</button>
    <button>TERCEIRO BOTÃO</button>
</div>

Se continuar optando pelo jQuery vc poderia fazer dessa forma:

$(document).ready(function(){
  $("button").click(function(){
      $("button").removeClass("buttonClicked");
      $(this).addClass("buttonClicked");
  });
});
.button-group{
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-group > button {
    box-shadow: none;
    border: 1px solid #cecece;
    background: #ffffff;
    padding: 10px;
    cursor: pointer;
    margin: 5px;
}

.buttonClicked {
    background-color: #628cea !important;
    color: #fff;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="button-group">
    <button>PRIMEIRO BOTÃO</button>
    <button>SEGUNDO BOTÃO</button>
    <button>TERCEIRO BOTÃO</button>
</div>

Como parece que vc está usando Bootstrpa pelas classes dos elementos, Vc pode optar pelo próprio jQuery que vc já deve ter no projeto e fazer dessa forma:

$(document).ready(function(){
  $("button").click(function(){
      $("button").removeClass("buttonClicked");
      $(this).addClass("buttonClicked");
  });
});
.button-group{
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-group > button {
    box-shadow: none;
    border: 1px solid #cecece;
    background: #ffffff;
    padding: 10px;
    cursor: pointer;
    margin: 5px;
}

.buttonClicked {
    background-color: #628cea !important;
    color: #fff;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="button-group">
    <button>PRIMEIRO BOTÃO</button>
    <button>SEGUNDO BOTÃO</button>
    <button>TERCEIRO BOTÃO</button>
</div>

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Se continuar optando pelo jQuery vc poderia fazer dessa forma:

$(document).ready(function(){
  $("button").click(function(){
      $("button").removeClass("buttonClicked");
      $(this).addClass("buttonClicked");
  });
});
.button-group{
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-group > button {
    box-shadow: none;
    border: 1px solid #cecece;
    background: #ffffff;
    padding: 10px;
    cursor: pointer;
    margin: 5px;
}

.buttonClicked {
    background-color: #628cea !important;
    color: #fff;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="button-group">
    <button>PRIMEIRO BOTÃO</button>
    <button>SEGUNDO BOTÃO</button>
    <button>TERCEIRO BOTÃO</button>
</div>