Question

我有一个带有图像的滚动时间轴：

<div class="roadmap">
  <h1 class="title">Roadmap</h1>
  <div class="timeline">
    <div class="swiper-roadmap">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url('https://unsplash.it/1920/500?image=15');" data-month="February">
          <div class="swiper-slide-content"><span class="timeline-year">By House ULTIMA</span>
            <h4 class="timeline-title">Live, Love and Prosper</h4>
          </div>
        </div>
        <div class="swiper-slide" style="background-image: url('https://unsplash.it/1920/500?image=16');" data-month="March">
          <div class="swiper-slide-content"><span class="timeline-year">By House TITAN</span>
            <h4 class="timeline-title">International Women's Day</h4>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>

除活动div之外，所有div都应隐藏。但是问题是所有div在页面上都可见。这是example

当我选择月份时，与其显示两个图像，它实际上应该显示一个图像，然后显示另一个图像。我该如何实现？

Answer 1

您必须进行一些CSS的更改。我在您的CSS Class末尾添加了两个CSS：

.swiper-slide{
  display:none;
}
.swiper-slide-active{
  display:block;
}

这是更新的代码：https://codepen.io/anon/pen/BeyvKz

Answer 2

您是否尝试将overflow: hidden;添加到.roadmap；

Answer 3

请尝试以下操作：

.timeline {
  overflow: hidden;
}

选中此Fiddle

Answer 4

最简单的解决方案是为“ swiper-slide”类的两个div提供不同的ID，然后编写JavaScript在两者之间进行切换。

var isFebruary = (month == "February");
document.getElementById("slide1").style.display = isFebruary ? 'block' : 'none';
document.getElementById("slide2").style.display = isFebruary ? 'none' : 'block';

（您也可以通过setAttribute（）和removeAttribute（）使用HTML5的“隐藏”属性

由于在div中有额外的属性data-month，因此可以通过在“ swiper-slide”类上使用querySelectorAll（）来获取该类所有div的列表，遍历该列表，然后隐藏除与月份匹配的所有div外的所有div。即使您在页面上增加了几个月的时间，代码也将起作用。

在页面中隐藏div

4 个答案: