Question

我有一个带有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，所以我会非常感激你们的帮助。

由于

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);
});

使用选项卡时，Bootstrap轮播活动类未正确应用

1 个答案: