自动更改 Twitter Bootstrap 选项卡

像这样的东西将创建一个永无止境的轮播循环; 它将循环浏览所有选项卡，并在到达最后一个选项卡后返回到第一个选项卡（将#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 演示---

修复了 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);
});

捕获悬停事件的一种方法。 这实际上取决于您试图捕捉什么元素来阻止循环。 选项卡或选项卡内容。 这将挂钩到选项卡。

$('.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')
    }

<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>