使用 jQuery 自动执行 Bootstrap 动态选项卡
Using jQuery to automate Bootstrap dynamic tabs
我有一组动态引导选项卡的以下代码:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Me</a></li>
<li><a data-toggle="tab" href="#menu1">AAA</a></li>
<li><a data-toggle="tab" href="#menu2">BBB</a></li>
<li><a data-toggle="tab" href="#menu3">CCC</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3><u>Me</u></h3>
<p>Content</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3><u>AAA</u></h3>
<p>content</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3><u>BBB</u></h3>
<p>content</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3><u>ccc</u></h3>
<p>content</p>
</div>
我想知道是否有一个 jquery 可以在 5 秒后自动切换到下一个选项卡,然后恢复到开头并循环?
这是一个小脚本,可能会给你一个想法:
var i = 0;
setInterval(function(){
var content = $(".tab-pane");
var menu = $(".nav-tabs li");
var prev = (i%(content.length))-1;
var curr = i%(content.length);
if(curr != 0){
$(menu[prev]).removeClass("active");
$(menu[curr]).addClass("active");
$(content[prev]).removeClass("in active");
$(content[curr]).addClass("in active");
}else{
$(menu[menu.length-1]).removeClass("active");
$(menu[0]).addClass("active");
$(content[content.length-1]).removeClass("in active");
$(content[0]).addClass("in active");
}
i++;
},1000);
工作小提琴 : https://jsfiddle.net/mt9n1dbs/
更新:
我实际上得到了一个更好的解决方案:
var i = 0;
setInterval(function(){
var menu = $(".nav-tabs li");
var curr = i%(menu.length);
if(curr != 0){
$(".nav-tabs > .active").next('li').find('a').trigger('click');
}else{
$(menu[0]).find('a').trigger('click');
}
i++;
},1000);
工作小提琴 2 : https://jsfiddle.net/mt9n1dbs/1/
相关文章:
- .aspx页面上引导程序中的动态选项卡
- AngularJS 指令的动态选项
- 如何将活动类添加到第一个动态选项卡而不是角度的静态选项卡
- 角度 JS 动态选项卡字段
- Mozilla”;添加“;sdk,简单的pref模块,动态选项(取决于以前选项的选项)
- 使用javascript的动态选项
- 为什么动态选项看起来这么小
- jQuery select2 动态选项
- 基于字母表的选择元素的动态选项组
- 使用 jQuery 自动执行 Bootstrap 动态选项卡
- 动态选项中的默认值
- JQuery 动态选项 选择“问题”
- 在BootStrap选项卡中添加动态选项卡
- jQuery UI选项卡:从链接定位动态选项卡
- Jquery UI禁用动态选项卡
- 如何在单击按钮时添加动态选项卡,但只能单击一次
- 在选择标签中插入动态选项,使用Jquery
- 将动态选项传递给javascript
- 木偶行为:添加动态选项
- 引导选择自定义动态选项