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滑块

1 个答案: