Question

当我们启用controlNav时，我们得到了很好的分页列表和一些有用的类，如flex-active。但是类添加到链接或图像（启用缩略图控件时）。像这样：

<ol class="flex-control-nav">
    <li><a class="flex-active">1</a></li>
    <li><a>1</a></li>
</ol>

如何将flex-active类移动到li元素而不是/ img元素来获得类似这样的内容：

<ol class="flex-control-nav">
    <li class="flex-active"><a>1</a></li>
    <li><a>1</a></li>
</ol>

编辑：这里我用来显示带缩略图控件的flexslider的脚本：

$('.clients-items').flexslider({
    animation: 'slide',
    controlNav: 'thumbnails',
    directionNav: false,
});

Answer 1

请提供您正在使用的jQuery以获得更精确的答案，但您可以使用这样的东西吗？

$('.clients-items').flexslider({
    animation: 'slide',
    controlNav: 'thumbnails',
    directionNav: false,
    start: function(){
        $('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌-active');
    },
    after: function(){
        $('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌-active');
    }
});

Answer 2

我认为最简单的方法是使用

.parent('li');

类似

jQuery('.flex-control-nav').find('a.flex-active')
    .removeClass('flex-active')   // remove the class from the a
    .parent('li')                 // select the parent of the a,.. li that is.
    .addClass('flex-active');     // add the flex-active class to the parent li.

Answer 3

我找到了这个解决方案，并为我工作 start: function() { //-- Add flexslider active class to li of nav control instead of just on the image if ($('.testimonial-section .flexslider ol.flex-control-nav').length > 0) { // initial check and addition $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() { if ($(this).children('img').hasClass('flex-active')) { $(this).children('img').removeClass('flex-active'); $(this).addClass('flex-active'); } else { $(this).removeClass('flex-active'); } }); // bind into flexslider callback and run dynamically $('.testimonial-section .flexslider').bind('start', function(event, slider) { $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() { if ($(this).children('img').hasClass('flex-active')) { $(this).children('img').removeClass('flex-active'); $(this).addClass('flex-active'); } else { $(this).removeClass('flex-active'); } }); }); } }, after: function() { //-- Add flexslider active class to li of nav control instead of just on the image if ($('.testimonial-section .flexslider ol.flex-control-nav').length > 0) { // initial check and addition $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() { if ($(this).children('img').hasClass('flex-active')) { $(this).children('img').removeClass('flex-active'); $(this).addClass('flex-active'); } else { $(this).removeClass('flex-active'); } }); // bind into flexslider callback and run dynamically $('.testimonial-section .flexslider').bind('after', function(event, slider) { $('.testimonial-section .flexslider ol.flex-control-nav li').each(function() { if ($(this).children('img').hasClass('flex-active')) { $(this).children('img').removeClass('flex-active'); $(this).addClass('flex-active'); } else { $(this).removeClass('flex-active'); } }); }); } }

Answer 4

start: function(){
    $('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌-active');
},
after: function(){
    $('.flex-control-nav li').removeClass('flex-active');
    $('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌-active');
}

将flex-active类添加到li而不是/ img

4 个答案: