javascript - Bootstrap JS 选项卡中的定时选项卡切换

Question

我想要 JS Tabs 会根据预设时间切换，得到如下代码:

 <script>
  var n=0
  var myVar=setInterval(function () {update_news()}, 1000);

  function update_news() {
    n = n+1
    if (n==4) {
       n=1
    }
    $('.nav-tabs a[href="#menu'+n+'"]').tab('show')

  }
  </script>

正文:

<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#menu1">Menu 1</a></li>
    <li><a href="#menu2">Menu 2</a></li>
    <li><a href="#menu3">Menu 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
    </div>
  </div>
</div>

但是，由于我不再使用链接来切换选项卡，有没有什么办法可以在没有 <a href="#menu"> 的情况下做到这一点？标签？我可以将它隐藏起来，但我发现该解决方案不是很优雅。

编辑:

我实际上删除了 data-toggle="tab"来自链接的属性，点击时不再切换标签 - 但仍可使用计时器。

这让我觉得标签切换与链接并没有真正相关，而只是与 <a href> 的存在有关<ul class="nav nav-tabs"> 下列表中的标记标签。

Answer 1

我已经完全删除了您的ul，并且为您的每个.tab-pane 放置了一个data-target 属性元素。

<div id="menu1" data-target='#menu1' class="tab-pane fade">
  <h3>Menu 1</h3>
</div>

然后，我将您的代码更改为:

$('#menu'+n).tab('show');

看看下面的片段:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
    </div>
    <div id="menu1" data-target='#menu1' class="tab-pane fade">
      <h3>Menu 1</h3>
    </div>
    <div id="menu2" data-target='#menu2' class="tab-pane fade">
      <h3>Menu 2</h3>
    </div>
    <div id="menu3" data-target='#menu3' class="tab-pane fade">
      <h3>Menu 3</h3>
    </div>
  </div>
</div>
<script>  
  var n = 0;
  var myVar = setInterval(update_news, 1000);

  function update_news() {
    n++;
    if (n === 4) n = 1;
    $('#menu'+n).tab('show')
  }
</script>