如何在Bootstrap的btn-group中预切换按钮？

Question 1

如何部署单选按钮组并使按钮之一预切换？

我有一个带有星期几值的单选按钮组。这个：

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

我需要的是获取当前日期值（使用var currentDay = new Date().getDay()）并toggle（激活）组中的相应按钮。

我正在尝试用下一个代码切换它（仅出于测试目的）：

$("#test0").button('toggle')

这是行不通的。

Question 2

您可以利用bootstraps.btn.active类并将其添加到希望首先切换的按钮中，并且可以使用jQuerys toggleClass来取消切换按钮。演示。

只是注意到twitter有一个按钮脚本，您可以调用此效果，这是一个固定的演示，其中包含您期望的结果。

在查看了您的评论中真正想要的内容之后，我用所需的结果更新了我的小提琴。

我添加了一个函数，该函数使用javascriptsgetDay方法从数组中提取当前日期，并通过定位按钮的ID来切换按钮组上的相应日期：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');

Question 3

我尝试了上述方法，但只想要HTML / CSS解决方案。

我发现基于焦点的方法适用于Bootstrap3。请注意，自动焦点是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>

我发现使用Bootstrap对小提琴进行Bootply比较容易。
这是我的测试引导程序：http : //www.bootply.com/cSntVlPZtU

Question 4

只是冒充点击页面加载的按钮：

$（“＃buttonid”）。trigger（“ click”）;

为我工作的另一个我希望显示为在页面加载时被单击的类似标准按钮-需要执行按钮操作才能设置我要显示的页面默认表格视图。其他按钮提供不同的视图，但默认按钮显示所有数据。

Question 5

我遇到了同样的问题，但是想要一个更简单的解决方案。我注意到将“ active”添加到类并不能解决问题，因为它以某种方式被删除了（我还没有研究为什么这样做）。

解决方案是将“ active active”附加到类中。这样，只有一个被移除，而另一个绕过了正在发生的魔力。这是一个非常肮脏的解决方案，但可以解决问题。希望能帮助到你！