открытие скрытых div кнопками вперед.назад
Доброго дня! Подскажите пожалуйста код:
Есть две кнопки - вперед и назад. Есть несколько скрытых блоков с контентом и один из них должен быть изначально видимый, все они в едином блоке. Например: <button id="back"></button> <button id="forw"></button> <div class="content"> <div class="item1">видимый</div> <div class="item2">не видимый</div> <div class="item3">не видимый</div> <div class="item4">не видимый</div> <div class="item5">не видимый</div> </div> Необходимо, что бы по нажатию кнопки вперед - содержимое следующего дива из списка становилось видимым, а предыдущее не видимым, а кнопки назад - наоборот соответственно и так по зацикленному кругу. Подскажите пожалуйста такой код. |
TarasL85,
на форуме сотни примеров ... TarasL85, https://javascript.ru/forum/misc/782...tml#post511471 медитировать над строкой 148 (CURRENT_IMG_INDEX + IMG_LENGTH + i) % IMG_LENGTH; искать другие примеры "простейшая" "простейший" |
Все что нахожу, либо для картинок, либо карусель. Мне необходимо что бы менялось свойство display, то есть все абсолютно как при обычных вкладках, только смена display:none осуществляется кнопками вперед/назад по кругу, а не как у классических вкладок где каждой вкладке соответствует своя кнопка.
|
кнопки вперёд назад
TarasL85,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.content .item{
display: none;
}
.content .item.show{
display: block;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const on = (parent, event, selector, fn) => parent.addEventListener(event, ({target}) => {
if(target = target.closest(selector)) fn(target)
});
const parent = document.querySelector(".content");
const children = parent.children;
let index = [...parent.children].indexOf(parent.querySelector(".show"));
const show = ({dataset : {up}}) => {
children[index].classList.remove("show");
index = (Number(up) + index + children.length) % children.length;
children[index].classList.add("show");
};
on(document, "click", "[data-up]", show);
});
</script>
</head>
<body>
<button data-up="-1">back</button>
<button data-up="1">forw</button>
<div class="content">
<div class="item show">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div></body>
</html>
|
Цитата:
|
Просто нет слов, это именно то что мне так нужно! Спасибо огромное, даже не ожидал так быстро получить помощь!!! Так как у меня сайт в большей степени текст, это очень сильно поможет улучшить его восприятие и разнообразит.
|
| Часовой пояс GMT +3, время: 04:45. |