Bootstrap 3按钮组

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (19)

** Bootstrap 3

我试图使每组按钮组都是唯一的,但不同的组互相干扰

<label>Payment Mode</label>
<div class="btn-group">
  <button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
  <button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
</div>

<label>Payment Period</label>
<div class="btn-group">
  <button type="button" class="btn btn-default">Immediate</button>
  <button type="button" class="btn btn-default"> More Than 1 day</button>
</div>

我如何在它自己的小组中保持独特性

提问于
用户回答回答于

如果您使用AngularJS,Angular UI引导程序有一个很好的解决方案。

基本上使用btnRadio指令执行以下操作。

<div class="btn-group">
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
用户回答回答于

单击btn-group中的按钮不会设置(活动)类。该按钮获得不同的背景颜色,因为它被聚焦(:焦点)。单击其他btn组中的按钮可将焦点设置为此按钮。

使用类似的东西为每个btn组设置一个活动类:

$('.btn-group button').click(function()
{
    $(this).parent().children().removeClass('active');
    $(this).addClass('active');
});

扫码关注云+社区

领取腾讯云代金券