有没有办法自动循环浏览 Bootstrap 选项卡（类似于轮播）？答案

【问题标题】：Is there a way to cycle through Bootstrap tabs automatically (similar to carousel)?有没有办法自动循环浏览 Bootstrap 选项卡（类似于轮播）？
【发布时间】：2020-09-26 18:41:26
【问题描述】：

我希望 Bootstrap 选项卡循环浏览每个选项卡，有点像轮播，每 10 秒左右更换一次。我认为这将需要一些自定义 javascript（但我有点新手）！

（如果手动单击选项卡，我也希望循环停止，但这更像是一个“延伸目标”！）

这是我目前得到的：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;
    }
});

但到目前为止我还没有运气！

任何帮助将不胜感激！

【问题讨论】：

标签： javascript bootstrap-4 tabs cycle

【解决方案1】：

我看到你的小提琴我想出了使用简单迭代的解决方案 JSFiddle 链接 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);
});

【讨论】：

非常感谢，效果很好！如果我要添加第二组选项卡，我将如何将它们与第一组区分开来？目前，当第一组标签更新时，它也会更新第二组 - 如果可能的话，我希望它们是独立的？在这里摆弄：jsfiddle.net/73jwhky5
有 2 种方法，通过父 div id 访问子项，或者将个人唯一 ID 分配给每个人，然后在 onload ready 函数中编写另一个 js

【解决方案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);
        });

【讨论】：