点击按钮切换颜色(并恢复其他按钮的颜色)

我有三个按钮,想要更改所选按钮的颜色。 正如您将看到的,我可以在选择时更改颜色,但是当选择buttonB时,我需要buttonA返回其原始颜色(此时buttonB应采用所选颜色),依此类推。 目前,所选的每个按钮都采用所选颜色,但按钮不会返回其原始颜色。

请看这个小提琴: http : //jsfiddle.net/Fwqv8/

这是脚本:

jQuery(document).ready(function(){ jQuery('button.account').click(function() { jQuery(this).removeClass("account"); jQuery(this).addClass("btn-success"); }); }); 

理想情况下,会有一个默认按钮(buttonA),当页面最初加载时,该按钮具有所选颜色。

非常感谢帮助。 谢谢。

您可以在onclick函数中的所有按钮上删除btn-success类,然后仅将类添加到新选择的类中

 jQuery(document).ready(function(){ jQuery('button.account').click(function() { jQuery('button.btn-success').removeClass('btn-success'); jQuery(this).removeClass("account"); jQuery(this).addClass("btn-success"); }); }); 

或者你可以有一个包含当前所选按钮的数组,并在新单击的按钮上删除btn-success类

http://jsfiddle.net/Fwqv8/3/

 jQuery(function(){ var $acctButtons = jQuery(".account"); jQuery('button.account').click(function() { $acctButtons.removeClass("btn-success"); jQuery(this).addClass("btn-success"); }); }); 

您可以使用TOGGLECLASS单个按钮

现场演示

您可以使用:

 jQuery(document).ready(function(){ jQuery('button.account').click(function(){ var that = this; jQuery('button.account').each(function(i, btn){ jQuery(this).addClass("btn-danger"); jQuery(this).removeClass("btn-success"); }); jQuery(that).addClass("btn-success"); }); }); 

此代码会使您的所有按钮在单击时切换回其默认状态。 只有单击的按钮将保留(在您的情况下)“绿色”。

通过在标记中设置默认类,可以轻松完成默认按钮。

JS

 jQuery(document).ready(function() { $('.btn').click(function() { $('.btn').removeClass("btnSelected"); $(this).addClass("btnSelected"); }) }); 

CSS

 .btn{ width:100px; height:20px; display:inline-block; background-color:red; } .btnSelected{ background-color:green; } 

HTML

 
Button 1
Button 2
Button 3

试试@ codebins