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

Question

我希望引导选项卡循环浏览每个选项卡，有点像旋转木马，每 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;
    }
});

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

任何帮助将非常感激！

标签： javascriptbootstrap-4tabscycle

Answer 1

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