Javascript 如何更改按钮的类名

我有四个这样的按钮

<div class="btn-group">
  <button id="btn-men"  class="btn btn-default active" 
             i18n:translate="men">Men</button>
  <button id="btn-women" class="btn btn-default" i18n:translate="women">Women</button>
  <button id="btn-kids" class="btn btn-default" i18n:translate="kids">Kids</button>
 </div>  

对于类btn btn default active和btn btn default，我有不同的css样式。我想知道的是，是否有任何方法可以将单击按钮的类名从btn btn default更改为btn btn default active，并在运行时将未单击按钮更改为btn btn default

我还将i18n用于多语言目的

为此使用addClass和removeClass

$(".btn-default").click(function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
});

---

看起来您正在使用引导，所以请使用引导方式解决它

<div class="btn-group" data-toggle="buttons">
    <label id="btn-men" class="btn btn-default active">
        <input type="radio" name="options" id="option1" checked /> Men
    </label>
    <label id="btn-women" class="btn btn-default">
        <input type="radio" name="options" id="option2"/> Women
    </label>
    <label id="btn-kids" class="btn btn-default">
        <input type="radio" name="options" id="option3"/> Kids
    </label>
</div>

演示：

---

请看

是的，有一种或多种方法。您尝试过什么？看起来您正在使用引导，当您单击其他按钮时，它会自动处理活动类。@@Eugen Timm:您完全正确。@@Eugen Timm:当我单击其他按钮时，如何停止活动类调用它自己。@@Arun P Johny:有效。但这给我带来了另一个问题。现在如果我使用i18n:translate，那么它就不起作用了。@stackOverFlow试试孩子们@Arun P Johny:非常感谢你们。正如我所预料的那样。