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

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.

查看全部
doumaikuang4202
doumaikuang4202
2015/10/19 21:46
  • css
  • php
  • ajax
  • javascript
  • jquery
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

2个回复