在使用选项卡时，错误地应用了引导旋转木马活动类

Question

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

网页显示可用的房间，每个房间都有自己的选项卡。当网页第一次加载第一个房间轮播显示，它应该和工作正确。图像按其应有的方式滑动。如果我在另一个房间重复滑动一些旋转图像的过程，然后返回到前一个房间，那么最初显示的图像将不止一个。

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

下面是将活动类添加到carousel和选项卡的代码。

$('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，所以一点帮助将不胜感激。

谢谢

Answer 1

问题是您将活动类添加到第一个项。但是当你回到已经滑动的旋转木马时，在第二，第三或第四位置有一个活动项目。因此，在添加类之后，您有两个活动项，然后它们都被显示。

一个快速的修复方法是在再次添加之前删除所有的活动类，像这样:

$('#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);
});