【问题标题】：Toggle between classes on click [duplicate]单击[重复]在类之间切换
【发布时间】：2014-06-07 13:45:32
【问题描述】：

如何在每次点击时添加和删除类？

原码

HTML：

<div class="box"></div>

CSS：

.box{
  width: 100px;
  height: 100px; 
  background: blue;
}

我要补充：

.rounded {
  border-radius: 10px;
}

我知道我必须使用box div上的点击功能，但我不知道如何添加和删除它。

答案：

使用切换类

$(".box").click(function(){
   $(this).toggleClass("rounded");
});

【问题讨论】：

【解决方案1】：

其他解决方案只是在类之间切换。如果您想修改现有的并从中添加/删除值，请使用：

$('.box').css('border-radius','50px');

并删除：

$('.box').css('border-radius', '');

【讨论】：

【解决方案2】：

Jquery 可以删除一个类，但是不能改变类中的任何 CSS：

$(target).addClass("myClass");
$(target).removeClass("myClass andThisOne removeSoManyClasses");

以另一种方式覆盖一个类：

$("body").append("<style class='remove'>.box{/*many css*/}</style>");
$(".remove").remove();

【讨论】：

【解决方案3】：

您不应该这样做。这种方法怎么样...

.box{
  width: 100px;
  height: 100px; 
  background: blue;
}

.box.rounded {
  border-radius: 10px;
}

然后只需使用toggleClass 切换“圆形”类。

$('.box').toggleClass('rounded');

【讨论】：

【解决方案4】：

是的，这是可能的。
添加css类的语法是，

$(selector).addClass(classname)

删除css类的语法是，

$(selector).removeClass(classname)

【讨论】：