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

【问题标题】：How can I pre-toggle a button in Bootstrap's btn-group?如何预先切换 Bootstrap btn-group 中的按钮？
【发布时间】：2012-03-04 01:53:00
【问题描述】：

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

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

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

这不起作用。

【问题讨论】：

切换是指激活吗？如，按下？
是的，切换、激活、按下——基本上都是一样的。

标签： jquery twitter-bootstrap

【解决方案1】：

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

刚刚注意到 twitter 有一个按钮脚本，您可以调用此效果，这里有一个固定的demo 与您期望的结果。

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

我添加了一个函数，该函数使用 javascripts getDay 方法从数组中提取当前日期，并通过定位按钮的 id 来切换按钮组上的相应日期：demo

相关代码：

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

【讨论】：

好吧。这很棘手。我到底需要什么——我需要获取当前日期（星期一、星期二、星期三等）的值并切换现在的日期。所以首先我将使用 newDate().getDay() 然后根据我需要切换正确的按钮的日子。你能告诉我什么吗？谢谢
对我来说最简单的解决方案是让每个按钮都有一个特殊的“id”，然后使用该 id 切换正确的。但是我不明白 $("") 语法的原理。我认为 $("#id") 会起作用，但它没有。
@momijigari 因为那是 jQuery 的语法。 Twitters Bootstrap 使用 jQuery 插件来运行，因此使用它的语法。
@momijigari 以扩展 Andres 对 jQuery 的评论，您应该说 $("#blahblah") 而不是 $("[id='blahblah']")，它归结为同一件事，但更简洁。附言jQuery 很棒 :) 另外，我认为对于支持非 JS 浏览器的人，您必须使用正确的类来呈现它（而不是纯粹依靠 JS 来切换类）。大多数人都很懒，只是用JS来做，如果你不能运行JS就会中断:)
上面的Demo已经失效了，bootstrap cdn的东西已经移动了。

【解决方案2】：

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

我发现基于 focus 的方法适用于 Bootstrap 3。请注意，autofocus 是 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。
这是我的测试引导：http://www.bootply.com/cSntVlPZtU

【讨论】：

Bootstrap 3+ 的更好答案。为我工作。谢谢。

【解决方案3】：

只需模拟正在点击页面加载的按钮：

$("#buttonid").trigger("click");

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

【讨论】：

【解决方案4】：

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

解决方案是将“active active”附加到类。这样，只有一个被删除，另一个绕过了背后发生的魔法。这是一个非常肮脏的解决方案，但它解决了问题。希望对您有所帮助！

【讨论】：