Javascript 更改当前按钮元素的类

我的Html

我的jQuery

.button {
background-color: #fff;
color:#000;
}

.buttonactive {
background-color: #000;
color:#fff;
}

我想将当前按钮更改为类按钮活动…

尝试将其作为参数传递给内联处理程序

HTML

尝试将其作为参数传递给内联hander

HTML

---

将按钮更改为删除内联事件处理程序：

function change(_this) {
   $(_this).addClass("buttonactive");
}

---

将按钮更改为删除内联事件处理程序：

function change(_this) {
   $(_this).addClass("buttonactive");
}

---

您还可以使用jQuery将单击事件绑定到按钮，并将ButtonActivity类添加到单击的按钮。从所有div中删除onchange调用

$('div.button').click(function(){
    $(this).addClass("buttonactive");
})

---

您还可以使用jQuery将单击事件绑定到按钮，并将ButtonActivity类添加到单击的按钮。从所有div中删除onchange调用

$('div.button').click(function(){
    $(this).addClass("buttonactive");
})

你的CSS是错误的。 CSS是级联的！ 你的建筑不稳定。使用此css：

$(function(){
  $('.button').click(function(){
    //remove class from previously active button
    $('.buttonactive').removeClass('buttonactive');
    $(this).addClass('buttonactive');
  });
});

另外：考虑将类按钮活动重命名为仅活动

您的CSS是错误的。 CSS是级联的！ 你的建筑不稳定。使用此css：

$(function(){
  $('.button').click(function(){
    //remove class from previously active button
    $('.buttonactive').removeClass('buttonactive');
    $(this).addClass('buttonactive');
  });
});

---

另外：考虑将类按钮活动重命名为仅活动

我同意这是首选的正确方法。但是如果OP的项目协议不允许他们将手放在HTML中怎么办。@RajaprabhuAravindasamy-即使HTML不能更改，jQuery仍然可以正常工作。谢谢。优雅的解决方案！如何确保只有最后单击的元素处于活动状态？因此，当单击另一个按钮时，其他按钮将处于非活动状态。是的，当然..：我刚刚意识到，我的代码也需要对HTML进行一些修改才能正常工作。@MarcSter-你可以使用或Rajaprabhu的小提琴。我同意这是一个正确的选择。但是如果OP的项目协议不允许他们将手放在HTML中怎么办。@RajaprabhuAravindasamy-即使HTML不能更改，jQuery仍然可以正常工作。谢谢。优雅的解决方案！如何确保只有最后单击的元素处于活动状态？因此，当单击另一个按钮时，其他按钮将处于非活动状态。是的，当然..：刚才意识到了一个事实，我的代码还需要对HTML进行一些更改才能正常工作。@MarcSter-你可以使用或Rajaprabhu的小提琴。链接选择器是没有必要的，除非OP只想将ButtonActivity类规则应用于也有button类的元素，而button类在问题中没有明确说明。此外，您的答案并没有解决实际将类应用于单击的元素的基本问题。1。类按钮和按钮活动位于同一级联级别：文件级别。只有后面在css文件中指定的第二个类的伪规则将ButtonActivity定义为更具体的。如果在button类之前移动ButtonActivity类，则ButtonActivity永远不会使用！因此，一个干净的规范是类的链接。2.好的，这个答案没有解决问题，我问为什么要投否决票，因为拉贾的答案也没有解决问题，但没有被否决。请在1时投票否决答案。您会遇到异常草率的，或2。没有付出任何努力，或3。显然，也许是危险的错误层叠级？文件级？伪规则？我不知道你在说什么，我使用CSS的时间已经超过我的记忆。如果你指的是CSS的特殊性，那是另一回事，而不是OP问题的焦点@拉贾普拉布胡的回答实际上回答了这个问题并解决了这个问题。至于为什么有些人对一个答案投反对票，而对另一个答案投反对票，这完全是猜测，可能是浪费时间。是的，我指的是特殊性，我用层叠这个词来形容非学者。2.无论是你用了多少年，还是你的记忆力都不是一个致命的论点。3.避免暗示不应使用填充顺序的伪特定性。4.Raja确实解决了这个问题，我也没有，好吧。链接选择器是没有必要的，除非OP只想将ButtonActivity类规则应用到也有button类的元素上，这在问题中没有明确说明。此外，您的答案并没有解决实际将类应用于单击的元素的基本问题。1。类按钮和按钮活动位于同一级联级别：文件级别。只有后面在css文件中指定的第二个类的伪规则将ButtonActivity定义为更具体的。如果在button类之前移动ButtonActivity类，则ButtonActivity永远不会使用！因此，一个干净的规范是类的链接。2.好的，这个答案没有解决问题，我问为什么要投否决票，因为拉贾的答案也没有解决问题，但没有被否决。请在1时投票否决答案。您会遇到异常草率的，或2。没有付出任何努力，或3。显然，也许是危险的错误层叠级？文件级？伪规则？我不知道你在说什么，我使用CSS的时间已经超过我的记忆。如果你指的是CSS的特殊性，那是另一回事，而不是OP问题的焦点@拉吉

---

阿普拉布胡的回答实际上回答了这个问题并解决了这个问题。至于为什么有些人对一个答案投反对票，而对另一个答案投反对票，这完全是猜测，可能是浪费时间。是的，我指的是特殊性，我用层叠这个词来形容非学者。2.无论是你用了多少年，还是你的记忆力都不是一个致命的论点。3.避免暗示不应使用填充顺序的伪特定性。4.拉贾确实解决了这个问题，我也是，好吧。

$(function(){
  $('.button').click(function(){
    //remove class from previously active button
    $('.buttonactive').removeClass('buttonactive');
    $(this).addClass('buttonactive');
  });
});

.button {
  background-color: #fff;
  color:#000;
}

.button.buttonactive {
  background-color: #000;
  color:#fff;
}