自动更改 Twitter Bootstrap 选项卡

Posted 2023-02-22

【中文标题】自动更改 Twitter Bootstrap 选项卡

【英文标题】：Change Twitter Bootstrap tabs automatically

【发布时间】：2012-08-12 07:39:51

【问题描述】：

我希望 Twitter Bootstrap 选项卡按时间顺序更改。我使用它们有点像旋转木马。我希望标签每 10 秒更改一次。

这里是一个例子：http://library.buffalo.edu

单击新闻故事以了解我的意思。任何帮助将不胜感激。

【问题讨论】：

你使用的是什么版本的 Twitter Bootstrap？

【参考方案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 ---

【讨论】：

非常感谢！您介意告诉我如何添加 clearInterval(tabCarousel) 以使其在悬停时暂停吗？

这种方法效果很好。但是触发click 并不是正确的方法。它可能会弄乱一些代码。要更改选项卡，只需将最后一行更改为 toClick.tab('show')

【参考方案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);
        );
    );

【讨论】：

实际上我更喜欢这个解决方案而不是接受的解决方案，因为它没有使用点击事件跳转到下一个选项卡。点击事件将导致例如。每次选项卡更改时关闭您的下拉导航！

var next = active.parent().next('li').length? active.parent().next('li').find('a') : tabs.filter(':first-child').find('a');为我工作

【参考方案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);
);

【参考方案4】：

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

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

【参考方案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);
    );


)

【参考方案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>