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

我在PHP文件中有一个AJAX调用，根据单击哪个按钮来替换div的内容。效果很好。现在，我有这个功能的工作，我想改变按钮的背景颜色从灰色到绿色，当它被点击，并让它保持绿色，直到另一个按钮被点击，然后有一个变成绿色。

下面是AJAX的javascript代码:

<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> 

以下是其中一个按钮的HTML:

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

下面是我将按钮变成绿色的CSS代码:

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

问题是上述代码在PC上的浏览器中运行良好，但只在Mac上的Chrome中运行。对于Mac上的Safari和Firefox以及IOS上的所有浏览器，它都不起作用。我还没能在IE中测试它。

似乎解决方案是使用jQuery为onClick事件添加另一个函数。我在stackoverflow上找到了一些可行的jQuery代码，但不知道如何或在哪里插入它。我几乎试过所有我能想到的组合。

我擅长PHP, HTML和CSS，但在JavaScript和AJAX方面是一个完全的新手。让AJAX工作对我来说是一个壮举。但是把按钮变成绿色，并且一直保持绿色，直到点击另一个按钮，这真的让我很兴奋。提前感谢你的帮助。

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

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

<button
    type="button"
    name="z3"
    onclick="$(this).css('background-color','#3DAE48'); ChangeContent3();">
    Zone 3
</button>