Question

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

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

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

这不起作用。

Answer 1

您可以利用bootstraps .btn.active类，只需将其添加到您希望首先切换的按钮，然后您可以使用jQuerys toggleClass取消按钮。 Demo

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

在从评论中查看您真正想要的内容后，我更新了您正在寻找的结果。

我添加了一个函数，它使用数组中的javascripts getDay方法拉出当前日期，并通过定位按钮的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');

Answer 2

我尝试了上述内容，但只想要一个HTML / CSS解决方案。

我发现基于焦点的方法适用于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的小提琴更容易这是我的测试bootply： http://www.bootply.com/cSntVlPZtU

Answer 3

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

$（ “＃buttonid”）触发器（ “点击”）;

为我工作了另一个类似的标准按钮我希望显示为已经点击页面加载 - 需要按钮操作来设置我想要显示的页面默认表格视图。其他按钮提供不同的视图，但默认视图显示所有数据。

Answer 4

我遇到了同样的问题，但想要一个更简单的解决方案。我注意到，追加＆＃34;活跃＆＃34;上课并没有解决问题，因为它以某种方式被删除（我还没有研究过它为什么会这样做）。

解决方案正在追加＆＃34;积极活跃＆＃34;上课。这样，只有一个被移除，另一个绕过了背后发生的魔力。这是一个非常肮脏的解决方案，但它解决了这个问题。希望它有所帮助！

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

4 个答案: