Скрыть div со страницы
У меня есть временная шкала прокрутки с изображениями:
<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'ы. Вот пример
Вместо того, чтобы показывать два изображения, оно должно показывать одно, а затем другое, когда я выбираю месяц. Как я могу достичь этого?
@Drakinite вы можете найти более подробную информацию в ручка
Когда вы задаете вопросы в stackoverflow, вы должны добавить достаточно подробностей к самому вопросу, чтобы людям было легче отвечать.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы должны внести некоторые CSS изменения. Я добавил два CSS Class в конце вашего CSS:
.swiper-slide{
display:none;
}
.swiper-slide-active{
display:block;
}
Вот обновленный код: https://codepen.io/anon/pen/BeyvKz
Вы пытались добавить overflow: hidden; к .roadmap;
Самое простое решение - дать два div класса "swiper-slide" разные идентификаторы, а затем написать javascript для переключения между ними.
var isFebruary = (month == "February");
document.getElementById("slide1").style.display = isFebruary ? 'block' : 'none';
document.getElementById("slide2").style.display = isFebruary ? 'none' : 'block';
(Вы также можете использовать «скрытый» атрибут HTML5, используя setAttribute() и removeAttribute())
Поскольку у вас есть дополнительный атрибут data-month в div, вы можете немного пофантазировать, используя querySelectorAll() в классе "swiper-slide", чтобы получить список всех div этого класса, пройти по списку и скрыть все div. кроме того, который соответствует месяцу. Код будет работать, даже если вы добавите на страницу больше месяцев.
Пожалуйста, дайте более подробную информацию по этому вопросу. Если вы ищете свойство CSS, просто выполните display: hidden; или видимость: нет;.