html - 仅带有 html 的 Bootstrap 按钮组预选按钮

Question

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

Answer 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 类，然后在单击任何同级按钮元素时将其删除。选择将像 radio 元素一样相互排斥。

这是直接取自 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>