javascript - 选项卡内的 BX slider

Question

我在一些选项卡内使用 BX slider 来显示和隐藏我的 WooCommerce 网站上的一些产品，但隐藏和显示似乎存在问题。我有一些简单的选项卡可以在此处显示和隐藏每个 slider :

$(window).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});

和 HTML:

<div id="tabs-container sub_sliders_controls">

        <ul class="tabs-menu">
            <li class="current"><a href="#tab-1">Living</a></li>
            <li><a href="#tab-2">Bedroom</a></li>
            <li><a href="#tab-3">Dining</a></li>
            <li><a href="#tab-4">Sofas</a></li>
            <li><a href="#tab-5">Office</a></li>
        </ul>
     </div>

以下是带有 slider 的选项卡:

<div class="tab">
    <div id="tab-1" class="tab-content">
        <div class="sub_sliders">
            <div class="bxslider2">
                <?php $wcatTerms = get_terms('product_cat', array('hide_empty' => 0, 'orderby' => 'ASC', 'parent' => 11, )); 
                    foreach($wcatTerms as $wcatTerm) : 
                    $wthumbnail_id = get_woocommerce_term_meta( $wcatTerm->term_id, 'thumbnail_id', true );
                    $wimage = wp_get_attachment_url( $wthumbnail_id );
                ?>
                <div class="slide_top_slide">
                    <a href="<?php echo get_term_link( $wcatTerm->slug, $wcatTerm->taxonomy ); ?>">
                        <?php if($wimage!=""):?><img src="<?php echo $wimage?>" class="aligncenter"><?php endif;?>
                    </a>
                    <a class="slide_top_slide_link"  href="<?php echo get_term_link( $wcatTerm->slug, $wcatTerm->taxonomy ); ?>">
                        <?php echo $wcatTerm->name; ?>
                    </a>
                </div>
                <?php endforeach; ?>   
            </div>
        </div>          
    </div>

    <div id="tab-2" class="tab-content">
        <div class="sub_sliders">
            <div class="bxslider2">
                <?php  
                $args = array( 'post_type' => 'product', 'posts_per_page' => 10, 'product_cat' => 'bedroom' ); 
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post(); 
                global $product; 
                ?>  
                <?php echo '<div class="slide_main">' . woocommerce_get_product_thumbnail().'</div>'; ?>
                <?php
                endwhile; 
                wp_reset_query(); 
                ?>   
            </div>
        </div>          
    </div>

    <div id="tab-3" class="tab-content">
        <div class="sub_sliders">
            <div class="bxslider2">
                <?php $wcatTerms = get_terms('product_cat', array('hide_empty' => 0, 'orderby' => 'ASC', 'parent' => 95, )); 
                    foreach($wcatTerms as $wcatTerm) : 
                    $wthumbnail_id = get_woocommerce_term_meta( $wcatTerm->term_id, 'thumbnail_id', true );
                    $wimage = wp_get_attachment_url( $wthumbnail_id );
                ?>
                <div class="slide_top_slide">
                    <a href="<?php echo get_term_link( $wcatTerm->slug, $wcatTerm->taxonomy ); ?>">
                        <?php if($wimage!=""):?><img src="<?php echo $wimage?>" class="aligncenter"><?php endif;?>
                    </a>
                    <a class="slide_top_slide_link"  href="<?php echo get_term_link( $wcatTerm->slug, $wcatTerm->taxonomy ); ?>">
                        <?php echo $wcatTerm->name; ?>
                    </a>
                </div>
                <?php endforeach; ?>   
            </div>
        </div>  
    </div>

    <div id="tab-4" class="tab-content">
        <div class="sub_sliders">
            <div class="bxslider2">
                <?php  
                $args = array( 'post_type' => 'product', 'posts_per_page' => 10, 'product_cat' => 'sofas' ); 
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post(); 
                global $product; 
                ?>  
                <?php echo '<div class="slide_main">' . woocommerce_get_product_thumbnail().'</div>'; ?>
                <?php
                endwhile; 
                wp_reset_query(); 
                ?>   
            </div>
        </div>          
    </div>

    <div id="tab-5" class="tab-content">
        <div class="sub_sliders">
            <div class="bxslider2">
                <?php  
                $args = array( 'post_type' => 'product', 'posts_per_page' => 10, 'product_cat' => 'office' ); 
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post(); 
                global $product; 
                ?>  
                <?php echo '<div class="slide_main">' . woocommerce_get_product_thumbnail().'</div>'; ?>
                <?php
                endwhile; 
                wp_reset_query(); 
                ?>   
            </div>
        </div>          
    </div>        
</div>

还有 CSS:

.tabs-menu {
    clear: both;
    text-align: center;
}

ul.tabs-menu{
    margin: 0;
    padding: 10px 0;
}

.tabs-menu ul{
    text-align: center;
    height: auto;
    overflow: auto;
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    list-style: none;
    display: inline-block;
}

.tabs-menu li.current {
    color: #fc5c5c;
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #fff;
    z-index: 5;
    display: inline-block;
}

.tabs-menu li a {
    padding: 10px;
    text-transform: uppercase;
    color: #000;
    text-decoration: none; 
    font-size: 13px;
    font-weight: 700;
}

.tabs-menu .current a {
    color: #fc5c5c;
    border-bottom:  2px solid #fc5c5c;
    font-weight: 700;
}

.tab {
    width: 100%;
}

.tab-content {
    display: none;
}

#tab-1 {
 display: block;   
}

但每次我在选项卡之间切换时，它只会加载选项卡 1 中的 slider 并隐藏其余部分？

这是 BX slider 代码:

$(window).ready(function(){
  $('.bxslider2').bxSlider({
    slideWidth: 5000,
    minSlides: 4,
    maxSlides: 4,
    pager: false,
    slideMargin: 25
  });
});

Answer 1

尝试切换 remove 和 addClass:

$(window).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().siblings().removeClass("current");
        $(this).parent().addClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});

编辑:现在意识到，这段代码和他的一样，我混淆了 .siblings() 部分并认为 removeClass 只会删除所有父元素的 .current