如何预先切换Bootstrap的btn-group中的button?
我刚开始使用bootstrap。
你能告诉我如何部署Radion Button组,并使其中一个button预切换。
我有一个无线电button组,有弱点价值的日子。 这个:
<div class="btn-group" data-toggle="buttons-radio"> <button class="btn" id="test0">Mon</button> <button class="btn" id="test1">Tue</button> <button class="btn" id="test2">Wed</button> <button class="btn" id="test3">Thu</button> <button class="btn" id="test4">Fri</button> <button class="btn" id="test5">Sat</button> <button class="btn" id="test6">Sun</button> </div>
我需要的是获取当前date值(使用var currentDay = new Date().getDay()
)并toggle
(激活)组中的相应button。
我试图用下一个代码切换它(仅用于testing目的):
$("#test0").button('toggle')
不工作。
先谢谢你。
您可以利用bootstraps .btn.active
类并将其添加到您希望首先切换的button,并且可以使用jQuerys toggleClass来解除button的locking。 演示 。
只是注意到twitter有一个你可以调用这个效果的button脚本,这里是一个你期望的结果的固定的演示 。
看了你从评论中真正想要的东西之后,我更新了我正在寻找的结果。
我添加了一个函数,它使用来自数组的javascripts getDay
方法拖动当前date,并通过定位button的ID来切换button组上的相应date: demo
相关编码:
JS
function today() { var arr = ["0", "1", "2", "3", "4", "5", "6"]; //first day of the week is sunday and its index is 0 var currentDay = new Date().getDay(); return (arr[currentDay]); } var day = '[id="test' + today() +'"]'; // we take the current day from the array and add the beginning of the class name and save it in a variable $(day).button('toggle');
我尝试了以上,但只想要一个HTML / CSS解决scheme。
我发现一个基于焦点的方法将适用于Bootstrap 3.请注意, 自动对焦是一个HTML5属性 。
<div class="btn-group"> <button class="btn" id="test0" autofocus="true">Mon</button> <button class="btn" id="test1">Tue</button> <button class="btn" id="test2">Wed</button> <button class="btn" id="test3">Thu</button> <button class="btn" id="test4">Fri</button> <button class="btn" id="test5">Sat</button> <button class="btn" id="test6">Sun</button> </div>
我发现Bootply比 Bootstrap更容易。
这是我的testingbootply: http : //www.bootply.com/cSntVlPZtU
我遇到了同样的问题,但想要一个更简单的解决scheme。 我注意到,追加“积极”类没有解决问题,因为它被删除某种程度上(我没有研究为什么这样做)。
解决scheme是在课堂上附加“积极主动”。 这样,只有一个被移除,另一个绕过后面发生的魔法。 这是一个非常肮脏的解决scheme,但它解决了这个问题。 希望能帮助到你!
只是模拟点击页面加载button:
$( “#buttonid”)触发( “点击”)。
为我工作的另一个类似的标准button,我想显示为已被点击页面加载 – button操作是必需的,以设置页面默认表格视图我想显示。 其他button提供不同的视图,但默认的显示所有数据。