使用选项卡时错误地应用了引导轮播活动类答案

【问题标题】：Bootstrap carousel active class incorrectly applied when using tabs使用选项卡时错误地应用了引导轮播活动类
【发布时间】：2015-09-03 18:32:39
【问题描述】：

我有一个带有 Bootstrap Carousel 的 Wordpress 网页，它没有设置活动的类。这些都由 JavaScript 处理。

网页显示可用的房间，每个房间都使用自己的标签。当网页首次加载第一个房间轮播时，它应该正常显示并正常工作。图像按应有的方式滑动。如果我然后重复滑过另一个房间的一些轮播图像的过程，然后返回到前一个房间，最初会显示超过 1 张图像。

这是因为轮播中的 2 个项目有一个活动类，我不知道如何阻止这种情况发生。

这是将活动类添加到轮播和选项卡的代码。

$('div[class="carousel-inner"] div:first').addClass( "active" );
    $('ol[class="carousel-indicators"] li:first').addClass( "active" );


    $('#room-tabs').on('shown.bs.tab', function() 
    {
        var $tp = $('.tab-pane:visible');
        $tp.find('.item:first').addClass('active');


        scrollTo($tp, 40);

    });


  });

暂存网站是http://thecurve.staging.wpengine.com/rooms/

我在使用 javascript 方面确实很挣扎，因此我们将不胜感激。

谢谢

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

问题是您将活动类添加到 first 项。但是当您返回到已经滑动的轮播时，在第二、第三或第四位置有一个活动项目。因此，添加类后，您有两个活动项目，然后都会显示。

快速解决方法是在重新添加之前删除所有活动类，如下所示：

$('#room-tabs').on('shown.bs.tab', function() {

  $(".carousel-inner > .active").removeClass("active");

  var $tp = $('.tab-pane:visible');
  $tp.find('.item:first').addClass('active');

  scrollTo($tp, 40);
});

【讨论】：