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

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);
        });
    });

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

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

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

Answer 5

我已将时钟添加到 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);
    });


})

Answer 6

Control user frequently clicks on navs manually, Here is a fiddle try to click multiple time on navs

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