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