一次切换一个按钮 Bootstrap

Question

过去一个小时我一直在玩这个，似乎无法弄清楚如何一次切换一个按钮。还试图让按钮更改为不同的颜色所以如果我单击 button1 它会切换。如果我然后单击 button2，则 button1 取消切换，button2 切换。这是我目前所拥有的

<div class="Demo-boot" style="padding:30px;">
 <button type="button" class="btn btn-primary" data-toggle="button">Button1</button>
       <button type="button" class="btn btn-primary" data-toggle="button">Button2</button>
  </div>

这是实际操作： http://www.bootply.com/MaxkTJs3HH

Answer 1

你需要在这样的按钮组中设置::

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Button 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Button 2
  </label>
</div>

Answer 2

首先给按钮添加一些id

<div class="Demo-boot" style="padding:30px;">
  <button id="button_one" type="button" class="btn btn-primary" data-toggle="button">Button1</button>
  <button id="button_two" type="button" class="btn btn-primary" data-toggle="button">Button2</button>
</div>

接下来添加一些jquery

$('#button_one').click(function (e) {
    $('#button_two').removeClass('active')
});

$('#button_two').click(function (e) {
    $('#button_one').removeClass('active')
});

运行产品：http://www.bootply.com/tT4yYWxjyk

一次切换一个按钮 Bootstrap

Toggle one button at at time Bootstrap

javascript

twitter-bootstrap-3