0

我想将 .active 类添加到我的自定义引导分页中。

目前，当我通过单击分页进行导航时效果很好，但如果我使用箭头，我的分页中的下一个项目不会激活。

所以，基本上我想看看 .carousel 元素的哪个子元素是活动的，并将活动类添加到我的分页中的相同（例如第二个）子元素。

$('.sb-links a').click(function(q){
  q.preventDefault();
  targetSlide = $(this).attr('data-to')-1;
  $('#myCarousel').carousel(targetSlide);
  $('a').removeClass('active');
  $(this).addClass('active').siblings().removeClass('active');
});

代码看起来像这样，但如果我手动键入子元素，它甚至不起作用。

if ( $('.carousel-inner div:nth-child(1)').hasClass('active') ) {
  $('.sb-links a:nth-child(1)').addClass('active');
};

提前感谢您的帮助！

4

1 回答 1

1

尝试：

// calculate the index you want
var index = 1; 
// get the div at the calculated index
var nthDiv = $('.carousel-inner div').eq(index);

// check if div has class
if (nthDiv.hasClass('active')) {
    // add class to the hyperlink at the same index
    $('.sb-links a').eq(index).addClass('active');
}

这是一个更完整的解决方案：

// attach an event which is triggered when transition is complete
$('#myCarousel').on('slid', function (e) {
    // get the index of the current frame
    var index = $('.carousel-inner div').index('.active');
    // get all the slider buttons
    var buttons = $('.sb-links a');
    // remove the 'active' class on all slider buttons
    buttons.removeClass('active');
    // add the 'active' class on the button corresponding to the current frame
    buttons.eq(index).addClass('active');
})
于 2012-12-20T18:18:59.163 回答