自动更改Twitter Bootstrap选项卡
我希望Twitter Bootstrap选项卡在定时序列上更改。 我使用它们有点像旋转木马。 我希望标签每10秒更改一次。
这是一个例子： http ： //library.buffalo.edu
点击新闻报道，看看我的意思。 任何帮助，将不胜感激。
像这样的东西会创造一个永无止境的旋转木马循环; 它将遍历所有选项卡并在到达最后一个选项后返回到第一个选项卡（将#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上触发的。
现在，如果要在用户hover或手动单击选项卡时添加逻辑以暂停或重置间隔，则需要单独添加，并且您将使用clearInterval(tabCarousel)来停止循环。
这是一个基本的演示：
— jsFiddle DEMO —
修复了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); }); });
另一个不错的选择是在单击选项卡时暂停幻灯片放映：
// 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); });
捕捉hover事件的一种方法。 这实际上取决于你想要阻止骑自行车的元素。 选项卡或选项卡内容。 这挂钩到标签。
$('.tabbable .nav-tabs > li').hover(function(){ clearInterval(tabCarousel); });
我已将时钟添加到Pallab的代码中。 因此，即使在超时期限之前单击了不同的选项卡，在我的情况下为10秒，当前选项卡将显示10秒，选项卡将在5秒后自动选项卡。 我是初学者，所以请耐心等待我的编码。
您必须在不到10秒的时间内一次单击2个或更多选项卡，一个选项卡
// 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); }); })
控制用户经常手动点击导航，这是一个小提琴尝试点击多次导航
// 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') }