仅带 html 的引导按钮组预选按钮答案

【问题标题】：Bootstrap button group pre-select button with html only仅带 html 的引导按钮组预选按钮
【发布时间】：2014-04-17 06:00:33
【问题描述】：

使用 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 twitter-bootstrap

【解决方案1】：

完全不可能只用 HTML 来做到这一点 - （正如你的标题所暗示的那样）。

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

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

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

EXAMPLE HERE

值得注意的是.btn-default.active的样式和.btn-default:focus是一样的：

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

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

这是直接取自Bootstrap JS documentation 的示例。值得注意的是，Bootstrap JS 文件/jQuery 需要包含进来。

EXAMPLE HERE

<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>

【讨论】：

这个答案最好添加一个 JS 解决方案，即使 OP 不需要它，以供将来参考