Question

我有一组动态引导标签的以下代码：

<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秒后转移到下一个标签然后恢复到开始并循环？

Answer 1

这是一个可能给你一个想法的小脚本：

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/

使用jQuery自动化Bootstrap动态选项卡

1 个答案: