Question

我有四个这样的按钮

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

我有类不同的CSS样式＆＃34; btn btn-default active＆＃34;和＆＃34; btn btn-default＆＃34;。我想知道的是，是否有任何方法可以将 btn btn-default 从 btn btn-default 更改为已点击按钮的类名，并且还可以更改未被点击的内容在运行时间按 btn btn-default 按钮。

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

Answer 1

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

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

Demo

Answer 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

下的广播示例

如何更改按钮的类名称

2 个答案: