点击按钮切换颜色(并恢复其他按钮的颜色)
我有三个按钮,想要更改所选按钮的颜色。 正如您将看到的,我可以在选择时更改颜色,但是当选择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类
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