使用 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>
正如该属性所暗示的,该按钮将在支持的浏览器中自动获得焦点。如果单击另一个按钮,第一个按钮的焦点将被移除。
值得注意的是,.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。
<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 - 仅带有 html 的 Bootstrap 按钮组预选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22362750/