如何更改按钮的类名答案

【问题标题】：How to change class name of a button如何更改按钮的类名
【发布时间】：2014-08-19 18:18:16
【问题描述】：

我有四个这样的按钮

<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 激活并更改未单击按钮按钮在运行时作为btn btn-default。

我还将 i18n 用于多语言目的。

【问题讨论】：

是的，有一种方法，或多种方法。你试过什么？
看起来您正在使用引导程序，当您单击其他按钮时，它会自行处理活动类。
@@Eugen Timm：你完全正确。
@@Eugen Timm：当我点击其他按钮时，如何阻止活动类调用自己

标签： javascript jquery css

【解决方案1】：

为此目的使用addClass() 和removeClass()

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

Demo

【讨论】：

【解决方案2】：

看来你用的是bootstrap，所以用bootstrap的方式解决吧

<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>

演示：Fiddle

看bootstrap buttons下的radio例子

【讨论】：

@@Arun P Johny ：它有效。但它给我带来了另一个问题。现在如果我使用 i18n: translate 那么它不起作用。
@stackOverFlow 试试<input type="radio" name="options" id="option3"/> <span i18n:translate="kids">Kids</span>
@@Arun P Johny：非常感谢。它按我的预期工作。