有没有办法自动循环浏览 Bootstrap 个标签页（类似于轮播）？

Question

我希望 Bootstrap 选项卡在每个选项卡中循环，有点像旋转木马，每 10 秒左右更改一次。我认为它需要一些自定义 javascript（但我还是个新手）！

（我也希望在手动单击选项卡时停止循环，但这更像是 'stretch goal'！）

这是我目前得到的：http://jsfiddle.net/59Lyhqmn/31/

我试过从类似的问题中实施解决方案，例如：

$(function(){
var tabs = $('#myTab a');
    var counter = 0;
    window.setInterval(activateTab, 1000);
    function activateTab(){

       tabs.removeClass('active');
       var currentLink = tabs[counter];

       $('.tab-pane').removeClass('.active').hide();
       currentLink.addClass('active');
       $(currentLink.attr('href')).addClass('active').show();
       if(counter  < tabs.length)
         counter= counter + 1;
       else 
         counter = 0;
    }
});

但到目前为止我运气不好！

如有任何帮助，我们将不胜感激！

Answer 1

我看到了你的 fiddle 我想出了使用简单迭代的解决方案 JSFiddle Link Working

    $(function(){
    var count = 0;
    setInterval(function(){
    if(count == 1){
      $("ul>li:nth-child(4)>a").removeClass("active");
      $("ul>li:nth-child(1)>a").addClass("active");
      $("#first-tab").addClass("active show in");
      $("#fourth-tab").removeClass("active show in");
    }
    else if(count == 2){
      $("ul>li:nth-child(2)>a").addClass("active");
      $("ul>li:nth-child(1)>a").removeClass("active");
      $("#second-tab").addClass("active show in");
      $("#first-tab").removeClass("active show in");
    }
    else if(count == 3){
      $("ul>li:nth-child(3)>a").addClass("active");
      $("ul>li:nth-child(2)>a").removeClass("active");
      $("#third-tab").addClass("active show in");
      $("#second-tab").removeClass("active show in");
    }
    else if(count == 4){
      $("ul>li:nth-child(4)>a").addClass("active");
      $("ul>li:nth-child(3)>a").removeClass("active");
      $("#fourth-tab").addClass("active show in");
      $("#third-tab").removeClass("active show in");
    }
    if (count == 4){count=1;}else{count+=1}
  }, 10000);
});

Answer 2

下面的解决方案似乎更平易近人，它基于Bootstrap Framework 3.4及以上，上面的代码没有改变面板，而且它可能会导致您的其他导航活动状态之间发生冲突，因为嗯

安静下来快乐编码。

       $(function(){
            var count = 0;
            setInterval(function(){
                if(count === 1){
                    $('#myTab a[href="#home"]').tab('show') // Select tab by name
                }
                else if(count === 2){
                    $('#myTab a[href="#profile"]').tab('show') // Select tab by name
                }
                else if(count === 3){
                    $('#myTab a[href="#contact"]').tab('show') // Select tab by name
                }
                else if(count === 4){
                    $('#myTab a[href="#packaging"]').tab('show') // Select tab by name
                }
                if (count === 4){count=1;}else{count+=1}
            }, 2000);
        });

有没有办法自动循环浏览 Bootstrap 个标签页（类似于轮播）？

Is there a way to cycle through Bootstrap tabs automatically (similar to carousel)?

javascript

tabs

cycle

bootstrap-4