自动更改Twitter Bootstrap选项卡

Question

我期待的Twitter Bootstrap选项卡在定时序列上发生更改。我正在使用它们有点像旋转木马。我希望标签每10秒更换一次。

下面是一个例子：http://library.buffalo.edu

点击新闻故事，明白我的意思。任何帮助，将不胜感激。

Answer 1

像这样的东西将创建一个永无止境的旋转木马循环;它通过将所有选项卡循环并返回到第一个到达最后一个（更改#yourTabWrapper是一个合适的选择出于某种包含您的标签标记）后：

var tabCarousel = setInterval(function() { 
    var tabs = $('#yourTabWrapper .nav-tabs > li'), 
     active = tabs.filter('.active'), 
     next = active.next('li'), 
     toClick = next.length ? next.find('a') : tabs.eq(0).find('a'); 

    toClick.trigger('click'); 
}, 3000); 

我们所要做的是找到活动标签，然后触发列表中下一个选项卡上的click事件。如果有是没有下一个选项卡，我们在第一个选项卡上触发click事件。请注意，事件实际上是在a上触发的，而不是li。

现在，如果您想要添加逻辑来暂停或重置用户悬停时间或手动点击选项卡的时间间隔，则需要单独添加该选项卡，并且您将使用clearInterval(tabCarousel)来停止骑车。

这是一个基本的演示：

追赶悬停事件的--- jsFiddle DEMO ---

Answer 2

的一种方式。这真的取决于你想要阻止骑自行车的元素。选项卡或选项卡内容。这挂钩到标签。

$('.tabbable .nav-tabs > li').hover(function(){ 
    clearInterval(tabCarousel); 
}); 

Answer 3

另一个不错的选择是暂停播放幻灯片单击选项卡时：

// Tab-Pane change function 
var tabChange = function(){ 
    var tabs = $('.nav-tabs > li'); 
    var active = tabs.filter('.active'); 
    var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a'); 
    // Use the Bootsrap tab show method 
    next.tab('show') 
} 
// Tab Cycle function 
var tabCycle = setInterval(tabChange, 5000) 
// Tab click event handler 
$(this).find('.nav-tabs a').click(function(e) { 
    e.preventDefault(); 
    // Stop the cycle 
    clearInterval(tabCycle); 
    // Show the clicked tabs associated tab-pane 
    $(this).tab('show') 
    // Start the cycle again in a predefined amount of time 
    setTimeout(function(){ 
     tabCycle = setInterval(tabChange, 5000); 
    }, 15000); 
}); 

Answer 4

修正了AppSol解决方案：

// Tab-Pane change function 
    var tabChange = function(){ 
     var tabs = $('.nav-tabs > li'); 
     var active = tabs.filter('.active'); 
     var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a'); 
     // Use the Bootsrap tab show method 
     next.tab('show') 
    } 
    // Tab Cycle function 
    var tabCycle = setInterval(tabChange, 5000) 
    // Tab click event handler 
    $(function(){ 
     $('.nav-tabs a').click(function(e) { 
      e.preventDefault(); 
      // Stop the cycle 
      clearInterval(tabCycle); 
      // Show the clicked tabs associated tab-pane 
      $(this).tab('show') 
      // Start the cycle again in a predefined amount of time 
      setTimeout(function(){ 
       tabCycle = setInterval(tabChange, 5000) 
      }, 30000); 
     }); 
    }); 

Answer 5

我已经加入了时钟到Pallab的代码。因此，即使在我的情况下超过10秒的时间点之前点击不同的标签，当前标签会显示10秒，标签会在5秒后自动标签。我是初学者，所以请耐心等待我的编码。

你必须按2个或多个标签，一个标签的同时，在不到10秒

// Tab-Pane change function 

tabChange = function(){ 
    var tabs = $('.nav-tabs > li'); 
    var active = tabs.filter('.active'); 
    var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a'); 
    // Use the Bootsrap tab show method 
    next.tab('show'); 
} // Tab Cycle function 
function settabchnge() { 
    //alert("in set tab"); 
tabCycle = setInterval(tabChange, 5000); 
} 

settabchnge(); 

function cleartabchange() { 
    clearInterval(tabCycle); 
} 

$(function(){ 

    var counterofclock = 1; 
    var counterofmoreclicks = 1; 
    var clicked = false; 
    var sec = 0; 
    function startClock() { 
     if (clicked === false) { 
      clock = setInterval(stopWatch, 1000); 
      clicked = true; 
     }else if (clicked === true) { 
     } 
    }  
    function stopWatch() { 
      sec++; 
    } 
    function stopClock() { 
      window.clearInterval(clock); 
      sec = 0; 
      clicked = false; 
    } 
    $('.nav-tabs a').click(function(e) { 
     if(counterofclock === 1){ 
      startClock(); 
      counterofclock = 2; 
     }else { 
      stopClock(); 
      startClock(); 
     } 
     e.preventDefault(); 
     // Stop the cycle 
     if (counterofmoreclicks == 2 && sec < 11){ 
      clearTimeout(starttabchnage); 
     } 
     counterofmoreclicks = 2; 
     clearInterval(tabCycle); 
     // Show the clicked tabs associated tab-pane 
     $(this).tab('show') 
     // Start the cycle again in a predefined amount of time 
     starttabchnage = setTimeout(function(){ settabchnge();}, 10000); 
    }); 


}) 

Answer 6

控制用户频繁地手动点击资产净值，这是一个fiddle尝试在单击多个时间资产净值

// Tab Cycle function 
 
    var tabCycle = setInterval(tabChange, 5000) 
 
    // Tab click event handler 
 
    $(function(){ 
 
     $('.nav-tabs a').click(function(e) { 
 
      e.preventDefault(); 
 
      // Stop the cycle 
 
      clearInterval(tabCycle); 
 
      // Start the cycle again in a predefined amount of time 
 
      $(this).tab('show') 
 
      setTimeout(function(){ 
 
       // Stop the cycle here too because if user clicked on tabs frequently then setTimeout function called too manny time 
 
       clearInterval(tabCycle); 
 
       tabCycle = setInterval(tabChange, 5000) 
 
      }, 15000); 
 
     }); 
 
    }); 
 
    
 
    // Tab-Pane change function 
 
    var tabChange = function(){ 
 
     var tabs = $('.nav-tabs > li'); 
 
     var active = tabs.filter('.active'); 
 
     var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a'); 
 
     next.tab('show') 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<ul class="nav nav-pills nav-tabs nav-stacked"> 
 
    <li class="active"><a href="#t1">Home</a></li> 
 
    <li><a href="#t2">Menu 1</a></li> 
 
    <li><a href="#t3">Menu 2</a></li> 
 
    <li><a href="#t4">Menu 3</a></li> 
 
</ul>