从页面上隐藏divs

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>

除非有效的divs都应隐藏。但是问题在于页面上所有DIV都可以看到。这是一个示例

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

Answer 1

请尝试以下尝试：

.timeline {
  overflow: hidden;
}

检查此小提琴

Answer 2

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

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

这是一个更新的代码：https：//codepen.io/anon/pen/beyvkz

Answer 3

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

Answer 4

最简单的解决方案是给出类" swiper-slide"不同的"不同ID"的两个div，然后写入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中具有附加属性数据月，因此您可以在" swiper-slide"类上使用queryselectorall((来获取类的所有div列表，从隐藏所有DIV，除了一个月匹配的一个。即使您在页面中添加了更多的月份，该代码也将起作用。