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

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