引导按钮组预先选择按钮，只有html [英] Bootstrap button group pre-select button with html only

问题描述

使用引导程序我想要一个按钮组，但预先选择了一个按钮。如果我使用下面的HTML，那么第一个按钮会被预先选中，但即使当我点击其他按钮时，它仍然保持活动状态。

Using Bootstrap I want a button group but with one button preselected. If I use the html below then the first button gets preselected, but it remains active even when I click on one of the other buttons.

只使用html我该如何定义

Using only html how can I define the button group with one button selected where that button will deselect when I click on one of the other buttons.

<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来做到这一点 - （正如你的标题所暗示的）。

It's not completely possible to do this with HTML only - (as your title implies).

真的，你可以做的唯一事情 / strong>将属性 autofocus =autofocus添加到所需的元素中，如下所示：

Really, the only thing you could do without JavaScript is add the attribute autofocus="autofocus" to the desired element like this:

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

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

As the attribute implies, the button will automatically be focused in supported browsers. If another button is clicked, the focus of the first button will be removed.

示例这里

值得注意的是 .btn-default.active 与 .btn-default：focus 相同：

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

不幸的是，当点击页面其他任何位置时，焦点也会被删除。如果这是一个问题，JavaScript就需要解决这个问题。解决方法是在所需元素上使用 active 类，然后在单击任何同级按钮元素时将其删除。这个选择与radio元素是相互排斥的。

Unfortunately, the focus will also be removed when clicking anywhere else on the page too. If this is a problem, JavaScript would be needed to solve this. The solution would be to have the active class on the desired element and then remove it when clicking on any of the sibling button elements. The selection would be mutually exclusive like with radio elements.

以下是直接从 Bootstrap JS文档。值得注意的是，需要包含Bootstrap JS文件/ jQuery。

Here is an example taken directly from the Bootstrap JS documentation. It's worth noting that the Bootstrap JS file/jQuery need to be included.

在此示例

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

这篇关于引导按钮组预先选择按钮，只有html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！