Adding flex-active class to the li instead of a/img

问题

When we enable controlNav, we get nice paging list and some usefull class like flex-active. but the class added to the link or image(when thumbnail control enabled). like this:

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

How to move flex-active class to the li element instead of a/img element to get something like this:

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

edit: here the script i used to show flexslider with thumbnail control:

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

回答1:

Please provide the jQuery you are using to get more precise answer but could you use something like this?

$('.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');
    }
});

回答2:

I think the easiest way would be using

.parent('li');

So something like

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.

回答3:

I found this solution and its work for me 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'); } }); }); } }

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

来源：https://stackoverflow.com/questions/25143437/adding-flex-active-class-to-the-li-instead-of-a-img

标签

jquery

flexslider