twitter-bootstrap – 在Bootstrap的btn组中预先切换一个按钮？

我想在Bootstrap的btn组中设置一个选择的按钮：

<div class="btn-toolbar">
 <div class="btn-group">
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
  <button type="button" class="btn btn-default">7</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">8</button>
 </div>
</div>

如何预选选项5？ This answer suggests,我可以添加活动类的按钮,这确实在最初工作,但是然后点击其他按钮不会停用该按钮,正如我所料.

这是一个小提琴：http://bootply.com/90490

这是应用活动类的另一个小提琴,显示为什么它不是正确的解决方案：http://bootply.com/90491 – 点击任何其他按钮,按钮5仍然保持活动状态.

解决方法

假设您希望每个按钮组都有一个选择,并且您已经包含引导JavaScript文件,那么以下内容应该可以正常工作.

标记

<div class="btn-toolbar">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="options" id="option5">5</label>
        <label class="btn btn-default"><input type="radio" name="options" id="option6">6</label>
        <label class="btn btn-default"><input type="radio" name="options" id="option7">7</label>
    </div>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="options" id="option8">8</label>
    </div>
</div>

JavaScript的

$(document).ready(function() {
    $(".btn").first().button("toggle");
});

例如,如果要预先切换第三个按钮,则可以使用如下的切片功能：

$(".btn").slice(2,3).button("toggle");

或者,您可以为按钮分配标识符.

这是我的小提琴：http://bootply.com/90501