我在某些标签页面中使用BX滑块来显示和隐藏我的WooCommerce网站上的某些产品,但隐藏和显示似乎存在问题。我有一些简单的标签来显示和隐藏每个滑块:
$(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>
以下是内置滑块的标签:
<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中的滑块并隐藏其余部分?
这是BX滑块代码:
$(window).ready(function(){
$('.bxslider2').bxSlider({
slideWidth: 5000,
minSlides: 4,
maxSlides: 4,
pager: false,
slideMargin: 25
});
});
答案 0 :(得分: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