Bootstrap 按钮组预选按钮，仅含 html

使用 Bootstrap 我想要一个按钮组，但预选了一个按钮。如果我使用下面的 html，那么第一个按钮将被预先选择，但即使我单击其他按钮之一，它仍然保持活动状态。

仅使用 html 如何定义选择一个按钮的按钮组，当我单击其他按钮之一时，该按钮将取消选择。

<div class="btn-group">
  <button type="button" class="btn btn-default active">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

它不是完全地可以仅使用 HTML 来做到这一点 -（正如你的标题所暗示的）.

真的，你唯一能做的就是没有 JavaScript是添加属性autofocus="autofocus"到所需的元素，如下所示：

<button type="button" class="btn btn-default" autofocus="autofocus">Left</button>

正如该属性所暗示的那样，该按钮将自动在支持的浏览器中聚焦。如果单击另一个按钮，第一个按钮的焦点将被移除。

示例在这里 http://jsfiddle.net/VZA4m/

值得注意的是，它的造型.btn-default.active是相同的.btn-default:focus:

.btn-default:focus, .btn-default.active {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad;
}

不幸的是，当单击页面上的其他任何位置时，焦点也会被删除。如果这是一个问题，则需要 JavaScript 来解决这个问题。解决方案是让active所需元素上的类，然后在单击任何同级按钮元素时将其删除。该选择将是相互排斥的，就像无线电元素一样。

这是直接取自的示例Bootstrap JS 文档 http://getbootstrap.com/javascript/#buttons。值得注意的是，需要包含 Bootstrap JS 文件/jQuery。

示例在这里 http://jsfiddle.net/YaD82/

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>