自动更改Twitter Bootstrap选项卡 [英] Change Twitter Bootstrap tabs automatically

问题描述

我希望Twitter Bootstrap标签在定时序列上发生变化。我使用它们有点像旋转木马。我希望标签每10秒更改一次。

I am looking to have the Twitter Bootstrap tabs change on a timed sequence. I am using them kind of like a carousel. I would like the tabs to change to the next one every 10 seconds.

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

点击新闻报道，了解我的意思。任何帮助将不胜感激。

Click on the news stories to see what I mean. Any help would be appreciated.

推荐答案

这样的事情将创造一个永无止境的轮播循环;它将循环遍历所有选项卡并在到达最后一个选项后返回到第一个选项卡（更改 #yourTabWrapper 以成为包含选项卡标记的适当选择器）：

Something like this will create a never-ending carousel loop; it will cycle through all tabs and return to the first one after it reaches the last (change #yourTabWrapper to be an appropriate selector for whatever contains your tab markup):

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

我们所做的就是找到活动标签，然后触发点击列表中下一个选项卡上的事件。如果 没有下一个标签，我们会在第一个标签上触发点击事件。请注意，事件实际上是在 a 上触发的，而不是 li 。

All we're doing is finding the active tab, then triggering the click event on the next tab in the list. If there is no next tab, we trigger the click event on the first tab. Note that the event is actually triggered on the a, not the li.

现在，如果你想添加逻辑来暂停或重置用户悬停或手动点击标签的时间间隔，那么需要单独添加，你可以使用 clearInterval（tabCarousel）停止骑行。

Now, if you want to add logic to pause or reset the interval when the user either hovers over or manually clicks a tab, that will need to be added separately, and you would use clearInterval(tabCarousel) to stop the cycling.

这是一个基本演示：

--- jsFiddle DEMO ---

这篇关于自动更改Twitter Bootstrap选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！