jQuery 如何在 Bootstrap 的 btn-group 中预切换按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9551628/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I pre-toggle a button in Bootstrap's btn-group?
提问by momijigari
How can I deploy the Radio Button group and make one of the buttons pre-toggled?
如何部署单选按钮组并使其中一个按钮预切换？
I have a radio-buttons group with days of the weeks values. This one:
我有一个带有星期几值的单选按钮组。这个：
<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>
What I need is to fetch the current day value (using var currentDay = new Date().getDay()) and toggle(activate) the corresponding button in the group.
我需要的是获取当前日期值（使用var currentDay = new Date().getDay()）和toggle（激活）组中的相应按钮。
And I'm trying to toggle it with the next code (just in testing purposes):
我正在尝试使用下一个代码切换它（仅用于测试目的）：
$("#test0").button('toggle')
This is not working.
这是行不通的。
回答by Andres Ilich
You can take advantage of the bootstraps .btn.activeclass and just add it to the button you wish toggled first and you can use jQuerys toggleClassto untoggle the buttons. Demo.
您可以利用 bootstraps.btn.active类并将其添加到您希望首先切换的按钮上，然后您可以使用 jQuery 的toggleClass来取消切换按钮。演示。
Just noticed that twitter has a button script that you can call for this effect, here is a fixed demowith the results you were expecting.
刚刚注意到 twitter 有一个按钮脚本，你可以调用它来实现这个效果，这里有一个固定的演示，里面有你所期望的结果。
After looking at what you actually wanted from the comment i updated my fiddle with the results you're looking for.
在从评论中查看您实际想要的内容后，我用您正在寻找的结果更新了我的小提琴。
I added a function that pulls the current day using javascripts getDaymethod from an array and toggles the corresponding day on the button group by targetting the id of the button: demo
我添加了一个函数，该函数使用 javascriptsgetDay方法从数组中提取当前日期，并通过定位按钮的 id 来切换按钮组上的相应日期：demo
Relevant Code:
相关代码：
JS
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');
回答by treejanitor
I tried the above but wanted a HTML/CSS solution only.
我尝试了上述方法，但只想要一个 HTML/CSS 解决方案。
I found a focusbased approach would work for Bootstrap 3. Note that autofocusis an HTML5 attribute.
我发现基于焦点的方法适用于 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>
I find Bootplyis easier for fiddles with Bootstrap.
Here is my test bootply: http://www.bootply.com/cSntVlPZtU
我发现Bootply对于使用 Bootstrap 的小提琴来说更容易。
这是我的测试 bootply：http: //www.bootply.com/cSntVlPZtU
回答by dave malia
just impersonate the button being click on page load:
只需模拟点击页面加载的按钮：
$("#buttonid").trigger("click");
$("#buttonid").trigger("click");
Worked for me for another similar standard button i wanted to show as having been clicked on page load - the button action was required to set the page default table view i wanted to display. Other buttons provide different views but the default one showed all data.
为我工作了另一个类似的标准按钮，我想显示为在页面加载时被点击 - 需要按钮操作来设置我想要显示的页面默认表格视图。其他按钮提供不同的视图，但默认一个显示所有数据。
回答by Bogsan
I encountered the same problem but wanted a simpler solution. I've noticed that appending "active" to class doesn't solve the problem, as it is removed somehow (I haven't researched why it does this).
我遇到了同样的问题，但想要一个更简单的解决方案。我注意到将“active”附加到类并不能解决问题，因为它以某种方式被删除了（我还没有研究它为什么这样做）。
The solution is appending "active active" to class. This way, only one is removed and the other bypasses the magic that's happening behind. It's a really dirty solution, but it solves the problem. Hope it helps!
解决方案是将“active active”附加到类。这样，只有一个被移除，另一个绕过了后面发生的魔法。这是一个非常肮脏的解决方案，但它解决了问题。希望能帮助到你！
