引导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">标记下列表中的<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>

​

Answer 2

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

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

JavaScript将是：

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