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>

但是，由于我不再使用 link 来切换标签页，有没有什么方法可以在没有 <a href="#menu"> 标签的情况下进行切换？我可以把它隐藏起来，但我觉得这个解决方案不是很优雅。

编辑：

我实际上从 link 中删除了 data-toggle="tab" 属性，单击时它不会再切换选项卡 - 但仍然可以使用计时器。

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

Answer 1

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

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

JavaScript 将是：

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

Answer 2

我已经完全删除了您的 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>

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

Timed tab switching in Bootstrap JS Tabs

javascript

tabs

twitter-bootstrap

编辑：