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" 属性，单击时它不会再切换选项卡 - 但仍然可以使用计时器。

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

Answer 1

我已经完全删除了您的 ul，并为您的每个 .tab-pane 元素添加了一个 data-target attr。

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

Answer 2

您可以通过更改location.hash 直接在JavaScript 中设置#menu1。这样你就不需要<a> 标签来改变它。因此，例如将其放在按钮上：

<button id="btn1">To Menu1</button>

JavaScript 将是：

document.getElementById("btn").onclick = function(){
    location.hash = "#menu1";
}