Jquery 带有 Slick slide 的滑块

Question

我想在 hquery 选项卡中有多个滑块，我的想法是每个选项卡都将成为 Woocommerce 中的一个类别，但我目前只是将它们硬编码到最初让它们工作。

问题是当我将滑块 html 移入标签代码时滑块不再显示？

这是我的问题的精确副本：JSFIDDLE

一旦我理解并克服了这个问题，我就可以放入我需要的循环。

$('.tabs-nav a').on('click', function (event) {
    event.preventDefault();

    $('.tab-active').removeClass('tab-active');
    $(this).parent().addClass('tab-active');
    $('.tabs-stage div').hide();
    $($(this).attr('href')).show();
});

$('.tabs-nav a:first').trigger('click'); // Default


//////////////////////////////////////////////////////////////


$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

Answer 1

您的选择器有误：$('.tabs-stage div').hide(); 这意味着 hie every div inside '.tabs-stage' and his children 所以每个 div 都被隐藏了，所以当你用 $($(this).attr('href')).show(); 显示活动滑块时，它只显示滑块而不显示其中仍然隐藏的 div 。

您应该使用：$('.tabs-stage > div').hide();（他 > 完全不同）这样，它只会隐藏直接子级 .tabs-stage。

You FIDDLE edited

Jquery 带有 Slick slide 的滑块

Jquery slider with Slick slide

javascript

slick.js