JSFiddle - React, Tailwind, and code Playground

by Jader Wagner

HTML

<div id="botoes">
    <div id="botao1" class="botaoativo"></div>
    <div id="botao2"></div>
    <div id="botao3"></div>
    <div id="botao4"></div>
</div>

CSS

#botao1, #botao2, #botao3, #botao4 {
    margin-left: 10px;
    width: 10px;
    float: left;
    height: 10px;
    background-color: #333333;
    cursor: pointer;
    position: relative;
    z-index: 10;
}
#botao1 {
    margin-left: 0;
}
.botaoativo {
    background-color: #FFF000 !important;
}

JavaScript

$('#botao1, #botao2, #botao3, #botao4').click(function () {
        if ($(this).hasClass('botaoativo')) return false; // presumindo que tenha mais comandos que não devem ser re-executados em caso de click no botão ativo como um .load ou .ajax por ex...
        $(".botaoativo").removeClass('botaoativo');
        $(this).addClass('botaoativo');
    });