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

一种解决方案是将按钮绑定(bind)到点击事件并添加一个类来设置 background-color

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

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