帶有滑動滑塊的jQuery滑塊

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 hie every div inside '.tabs-stage' and his children以便每個div被隱藏，因此當您使用$($(this).attr('href')).show();顯示活動滑塊時$($(this).attr('href')).show(); 它僅顯示滑塊，而不顯示其中仍隱藏的div。

您應該使用： $('.tabs-stage > div').hide(); （他>使所有的差異）這樣，它只是隱藏直接孩子關.tabs-stage 。

您FIDDLE已編輯