编辑：

Question

我想要根据预设时间切换的JS标签，并获得以下代码：

shrinkToFit: false

体：

 <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>标记的存在。

Answer 1

我已完全删除了您的ul，并为每个data-target元素添加了.tab-pane 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

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

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

JavaScript将是：

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

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

编辑：

2 个答案: