我想在Bootstrap的btn组中设置一个选择的按钮:
<div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">6</button> <button type="button" class="btn btn-default">7</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">8</button> </div> </div>
如何预选选项5? This answer suggests,我可以添加活动类的按钮,这确实在最初工作,但是然后点击其他按钮不会停用该按钮,正如我所料.
这是一个小提琴:http://bootply.com/90490
这是应用活动类的另一个小提琴,显示为什么它不是正确的解决方案:http://bootply.com/90491 – 点击任何其他按钮,按钮5仍然保持活动状态.
解决方法
假设您希望每个按钮组都有一个选择,并且您已经包含引导JavaScript文件,那么以下内容应该可以正常工作.
<div class="btn-toolbar"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"><input type="radio" name="options" id="option5">5</label> <label class="btn btn-default"><input type="radio" name="options" id="option6">6</label> <label class="btn btn-default"><input type="radio" name="options" id="option7">7</label> </div> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"><input type="radio" name="options" id="option8">8</label> </div> </div>
JavaScript的
$(document).ready(function() { $(".btn").first().button("toggle"); });
例如,如果要预先切换第三个按钮,则可以使用如下的切片功能:
$(".btn").slice(2,3).button("toggle");
或者,您可以为按钮分配标识符.
这是我的小提琴:http://bootply.com/90501
原文地址:https://www.jb51.cc/bootstrap/234021.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。