Question

我想将class .active添加到我的自定义bootstrap分页中。

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

所以，基本上我想查看.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');
};

提前感谢您的帮助！

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

如果nth-child（变量）具有活动类，则将class激活添加到另一个Element的nth-child

1 个答案: