Javascript 自动更改Twitter引导选项卡

我想让Twitter引导标签按时间顺序更改。我使用它们就像旋转木马一样。我希望标签每10秒换到下一个

以下是一个例子：

---

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

像这样的东西将创建一个永无止境的旋转木马循环；它将在所有选项卡之间循环，并在到达最后一个选项卡后返回到第一个选项卡（将

#yourTabWrapper

更改为包含选项卡标记的内容的适当选择器）：

我们所做的就是找到活动选项卡，然后触发列表中下一个选项卡上的

单击
事件。如果没有下一个选项卡，我们将触发第一个选项卡上的
单击
事件。请注意，事件实际上是在
a
上触发的，而不是在
li
上触发的

现在，如果您想在用户悬停或手动单击选项卡时添加暂停或重置间隔的逻辑，则需要单独添加，并且您可以使用
clearInterval（tabCarousel）
停止循环

下面是一个基本演示：

捕获悬停事件的一种方法。这实际上取决于你试图抓住什么元素来阻止自行车。选项卡或选项卡内容。这与标签挂钩

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

另一个不错的选择是在单击选项卡时暂停幻灯片放映：

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

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

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


})

//选项卡窗格更改功能
tabChange=函数（）{
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'）；
//使用Bootsrap选项卡show方法
next.tab（'show'）；
}//制表符循环函数
函数setTabChange（）{
//警报（“设置选项卡中”）；
tabCycle=setInterval（tabChange，5000）；
}
settabchnge（）；
函数cleartabchange（）{
清除间隔（tabCycle）；
}
$（函数（）{
var计数器OFCLOCK=1；
风险价值=1；
var=false；
var-sec=0；
函数startClock（）{
如果（单击===false）{
时钟=设定间隔（秒表，1000）；
单击=真；
}else if（单击===true）{
}
}       
功能秒表（）{
sec++；
}
函数stopClock（）{
窗口。清除间隔（时钟）；
秒=0；
单击=假；
}
$（'.nav选项卡a'）。单击（功能（e）{
if（计数器OFCLOCK==1）{
startClock（）；
计数器OFCLOCK=2；
}否则{
秒钟（）；
startClock（）；
}
e、 预防默认值（）；
//停止循环
if（counterofmoreclicks==2&&sec<11）{
清除超时（starttabchnage）；
}
计数器=2；
清除间隔（tabCycle）；
//显示已单击的选项卡关联的选项卡窗格
$（this.tab（'show'））
//在预定义的时间内再次开始循环
starttabchnage=setTimeout（函数（）{settabchnage（）；}，10000）；
});
})
控制用户经常手动单击导航，下面是一个尝试多次单击导航的方法


//制表符循环函数
var tabCycle=setInterval（tabChange，5000）
//选项卡单击事件处理程序
$（函数（）{
$（'.nav选项卡a'）。单击（功能（e）{
e、 预防默认值（）；
//停止循环
清除间隔（tabCycle）；
//在预定义的时间内再次开始循环
$（this.tab（'show'））
setTimeout（函数（）{
//在此也停止循环，因为如果用户频繁单击选项卡，则setTimeout函数称为To manny time
清除间隔（tabCycle）；
tabCycle=setInterval（tabChange，5000）
}, 15000);
});
});
//选项卡窗格更改功能
var tabChange=函数（）{
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'）
}






您使用的是哪个版本的Twitter引导？非常有效，谢谢！您介意告诉我如何添加clearInterval（tabCarousel）使其在悬停时暂停吗？这种方法非常有效。但是，触发
单击
不是正确的方法。它可能会弄乱一些代码。要更改选项卡，只需将最后一行更改为
toClick.tab（'show'）
实际上，我更喜欢此解决方案，而不是接受的解决方案，因为它不使用单击事件跳转到下一个选项卡。单击事件将导致您的下拉导航在每次选项卡更改时关闭！var next=active.parent（）.next（'li'）。长度？active.parent（）.next（'li'）.find（'a'）：tabs.filter（'：first child'）.find（'a'）；为我工作
// 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);
    });


})