添加另一个jQuery函数到AJAX调用或CSS解决方案
jQuery add another function to AJAX call or CSS solution?
我在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工作对我来说是一个壮举。但是把按钮变成绿色,并且一直保持绿色,直到点击另一个按钮,这真的让我很兴奋。提前感谢你的帮助。
一种解决方案是将按钮绑定到单击事件,并添加一个类来设置background-color
$('button').click(function () {
$('button').removeClass('btn-active');
$(this).addClass('btn-active');
});
首先我们从所有按钮中删除类btn-active,然后将类添加到我们单击的按钮中。如果你的页面上有多个按钮,应该有这种行为,你可能应该在这些按钮上添加一个类,并改变事件只监听那些按钮与类。
不使用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
相关文章:
- 正在创建网页,并希望将外部链接调用为html和css
- PHP,MySQL,AJAX-调用AJAX结果后,Bootstrap CSS样式不会显示
- CSS + jQ插件阻止AJAX调用/事件侦听器工作
- 当 Node.js 调用 HTML 时,外部 Javascript 和 CSS 不会对 HTML 产生影响
- 将rails路由调用到CSS(在haml中)
- 将image从css调用为javascript并添加整数值
- CSS,Java脚本在php中调用ajax后无法正常工作
- 可以't在对jQueryLite的CSS调用中设置重复属性
- CSS更改后调用javascript函数
- JS onclick问题调用css精灵的图片
- 如何使用Javascript手动调用CSS动画
- JQuery css() 效果逆转,除非我事先调用 alert('时间浪费')
- 将javascript函数的结果调用到Jquery css事件中,加载和调整大小
- 调用CSS和HTML时的Jquery函数
- 如何在webview中调用css和js文件
- 在母版页上选择性地调用css
- 使用Symfony 2从js中调用css
- 如何从JavaScript调用CSS
- 不能在javascript中从数据表服务器端调用CSS类
- 从javascript调用css规则