首页 文章

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

提问于
浏览 次
1

我有一个带有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 回答

  • 0

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

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

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

相关问题