Change the background color of the button when clicked, and back after clicking on another button

Question

There are three buttons, each button has its own color.
But the problem is that I click on 1 - the color is active, I press on 2 - the color is also active.
And it is necessary to click on 2 and 1 color is gone.

Here is my code:

$('.first').click(function(){ $('#active1').css('background-color', '#339999'); }) $('.firsts').click(function(){ $('#active2').css('background-color', '#339933'); }) $('.firstss').click(function(){ $('#active3').css('background-color', '#993399'); })

 *{ box-sizing: border-box; padding: 0; margin: 0; } body { font-size: 16px; font-family: "Poppins", Arial; /* background-color: #a7a6a6; */ } .menu { width: 50%; margin: 0 auto; padding-top: 50px; display: flex; } .menu button { padding: 10px; border-radius: 5px; } .firsts { color: red; }

 <div class="menu"> <div class="first"><button id="active1">6</button></div> <div class="firsts"><button id="active2">12</button></div> <div class="firstss"><button id="active3">24</button></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="script.js"></script>

Igor Igor 78k five 20 48 · Accepted Answer · 2018-10-12T18:46:31

 $('.first').click(function() { function storeColor(aBtn) { var originalColor = $(aBtn).data("originalcolor"); if (!originalColor) { originalColor = window.getComputedStyle(aBtn).backgroundColor; $(aBtn).data("originalcolor", originalColor); } return originalColor; } function resetColor(aBtn) { var originalColor = storeColor(aBtn); $(aBtn).css('background-color', originalColor); } function setColor(aBtn) { storeColor(aBtn); var newColor = $(aBtn).data("backcolor"); $(aBtn).css('background-color', newColor); } $(".first button").each(function(){ resetColor(this); }); setColor($(this).find("button")[0]); });

 * { box-sizing: border-box; padding: 0; margin: 0; } body { font-size: 16px; font-family: "Poppins", Arial; /* background-color: #a7a6a6; */ } .menu { width: 50%; margin: 0 auto; padding-top: 50px; display: flex; } .menu button { padding: 10px; border-radius: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="menu"> <div class="first"><button data-backcolor="#339999">6</button></div> <div class="first"><button data-backcolor="#339933">12</button></div> <div class="first"><button data-backcolor="#993399">24</button></div> </div>

@BogdanMakarenko And the "help" sign is the up arrow to the left of the answer.
@ 0xdb Only after you vote for the question), and the author’s reputation will reach a value of 15.

Change the background color of the button when clicked, and back after clicking on another button

1 answer 1

More articles: