Bootstrap按钮组预选择按钮只有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.

使用Bootstrap，我需要一个按钮组，但只有一个按钮是预先选择的。如果我使用下面的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.

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

1 个解决方案

#1

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

仅仅使用HTML是不完全可能的—(正如您的标题所暗示的)。

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

实际上，在没有JavaScript的情况下，惟一能做的就是将属性autofocus="autofocus"添加到所需的元素如下:

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

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

EXAMPLE HERE

例子

It's worth noting that the styling of .btn-default.active is the same as .btn-default:focus:

值得注意的是，.btn-default的样式。活动与.btn-default相同:焦点:

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

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.

不幸的是，当点击页面上的其他地方时，焦点也会被移除。如果这是一个问题，那么需要JavaScript来解决这个问题。解决方案是将活动类放在所需的元素上，然后在单击任何同胞按钮元素时删除它。选择将是互斥的，就像无线电元素。

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.

下面是一个直接从Bootstrap JS文档中获得的示例。值得注意的是，需要包含引导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>