jQuery 向 AJAX 调用或 CSS 解决方案添加另一个功能？

Question

我在 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 工作对我来说是一项壮举。但是，将按钮变为绿色并使其保持绿色直到单击另一个按钮确实让我感到头晕目眩。非常感谢您在此提供帮助。

Answer 1

一种解决方案是将按钮绑定到单击事件并添加一个设置background-color的类

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

首先我们从所有按钮中删除类btn-active，然后将类添加到我们单击的按钮中。 如果您的页面上有多个按钮，则应该具有这种行为，您可能应该在这些按钮上添加一个类，并更改该事件仅侦听具有该类的那些按钮。

Answer 2

不用CSS，直接替换

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

这样，您将使用 jQuery 更改按钮的背景颜色