自動更改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>