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

概述使用Bootstrap我想要一个按钮组,但预先选择了一个按钮.如果我使用下面的html,则第一个按钮被预选,但即使我点击其他按钮之一,它仍然保持活动状态. 仅使用html如何定义按钮组,并选择一个按钮,当我单击其中一个按钮时,该按钮将取消选择. <div class="btn-group"> <button type="button" class="btn btn-default active 使用bootstrap我想要一个按钮组,但预先选择了一个按钮.如果我使用下面的HTML,则第一个按钮被预选,但即使我点击其他按钮之一,它仍然保持活动状态.

仅使用HTML如何定义按钮组,并选择一个按钮,当我单击其中一个按钮时,该按钮将取消选择.

<div >  <button type="button" >left</button>  <button type="button" >MIDdle</button>  <button type="button" >Right</button></div>

@R_404_6120@ 完全不可能只使用HTML – (正如你的标题所暗示的那样).

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

<button type="button"  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来解决这个问题.解决方案是在所需元素上使用活动类,然后在单击任何兄弟按钮元素时将其删除.选择将与无线电元素相互排斥.

以下是直接从Bootstrap JS documentation开始的示例.值得注意的是,需要包含bootstrap Js文件/ jquery.

EXAMPLE HERE

<div  data-toggle="buttons">  <label >    <input type="radio" name="options" ID="option1"> Option 1  </label>  <label >    <input type="radio" name="options" ID="option2"> Option 2  </label>  <label >    <input type="radio" name="options" ID="option3"> Option 3  </label></div>

总结

以上是内存溢出为你收集整理的仅带html的Bootstrap按钮组预选按钮全部内容，希望文章能够帮你解决仅带html的Bootstrap按钮组预选按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。