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

2 个答案: