Question

我正在使用Swiper.js滑块。

当幻灯片处于活动状态时，我想在幻灯片下方添加两个 div 作为说明。

index.html

 <div class="swiper-container about">
  <div class="swiper-wrapper">
    <div class="swiper-slide about one">
      <div class="imgBx">
        <img src="one.jpg">
      </div>
      <div class="employee">
        <h3>Tom<br><span>Founder</span></h3>
      </div>
      <div class="employee-details-text">
        Description
      </div>

      <div class="employee-details-note">
        Description 2
      </div>
    </div>
    <div class="swiper-slide about two">
      <div class="imgBx">
        <img src="two.jpg">
      </div>
      <div class="employee">
        <h3>Ine<br><span>Founder and CEO</span></h3>
      </div>
      <div class="employee-details-text">
        Description
      </div>

      <div class="employee-details-note">
        Description 2
      </div>
    </div>
  </div>
</div>

当幻灯片处于活动状态时，添加了类swiper-slide-active

<div class="swiper-slide about one swiper-slide-active">

这是我的代码：

$(document).ready(function () {
  if($("div.swiper-slide.one").hasClass('swiper-slide-active')){
    $("employee-details-text, employee-details-note").show();
  }else{
    $("employee-details-text, employee-details-note").hide();
  }
});

我在one div中添加了two和swiper-slide类，以便解析幻灯片。

如果幻灯片具有类employee-details-note，则始终显示我具有employee-details-text div的代码，而根本不显示swiper-slide-active的代码。

Answer 1

我认为没有必要使用JS来完成您的工作，这是可以帮助您的CSS代码。

make

使用jQuery动态添加类时如何显示div

1 个答案: