jQuery为AJAX调用或CSS解决方案添加另一个函数？

Question

I have an AJAX call in a PHP file that replaces the content of a div, depending on which button is clicked. It works beautifully. Now that I have that functionality working, I would like to change the background color of the button from gray to green, when it is clicked, and have it stay green until another button is clicked, then have that one turn green.

Here is the javascript for the AJAX:

<script language="JavaScript">
function ChangeContent1()
{
  $("#table_area_dripPSZ1").load("zone1PS.php");
}
function ChangeContent2()
{
  $("#table_area_dripPSZ1").load("zone2PS.php");
}
function ChangeContent3()
{
  $("#table_area_dripPSZ1").load("zone3PS.php");
}
</script> 

Here is the HTML for one of the buttons:

<button
    type="button"
    name="z3"
    onclick="ChangeContent3()">
    Zone 3
</button>

Here is the CSS I used for changing the button to green:

button:active {
background-color: #3DAE48;
}

button:focus {
background-color: #3DAE48;
}

button:focus:active {
background-color: #3DAE48;
}

The problem is that the above code works fine in browsers on the PC, but only works in Chrome on the Mac. For Safari and Firefox on the Mac, and all browsers in IOS, it doesn't work. I haven't been able to test it yet in IE.

It seems that the solution is to use jQuery to add another function to the onClick event. I found some viable jQuery code here on stackoverflow, but can't figure how or where to insert it. I've tried pretty much every combination I could think of.

I'm good with PHP, HTML, and CSS, but am a complete newbie at JavaScript and AJAX. It was a feat for me to get the AJAX working. But this turning the button green and having it stay green until another is clicked has really got me in a tizzy. Thank you so much in advance for help with this.

Answer 1

One solution would be to bind the buttons to a click event and add a class that sets the background-color

$('button').click(function () {
   $('button').removeClass('btn-active');
   $(this).addClass('btn-active'); 
});

First we remove the class btn-active from all buttons, and then add the class to the button we clicked. If you have multiple buttons on your page, that should have this behavior you should probably add a class on those buttons, and change that events only listens to those button with that class.