Форум

TarasL85 · #1 (**permalink**) 26.02.2020, 21:54

Доброго дня! Подскажите пожалуйста код:
Есть две кнопки - вперед и назад. Есть несколько скрытых блоков с контентом и один из них должен быть изначально видимый, все они в едином блоке. Например:
<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>

Необходимо, что бы по нажатию кнопки вперед - содержимое следующего дива из списка становилось видимым, а предыдущее не видимым, а кнопки назад - наоборот соответственно и так по зацикленному кругу.

Подскажите пожалуйста такой код.

рони · #2 (**permalink**) 26.02.2020, 22:06

TarasL85,
на форуме сотни примеров ... TarasL85,
https://javascript.ru/forum/misc/782...tml#post511471
медитировать над строкой 148

(CURRENT_IMG_INDEX + IMG_LENGTH + i) % IMG_LENGTH;

искать другие примеры "простейшая" "простейший"

TarasL85 · #3 (**permalink**) 26.02.2020, 22:28

Все что нахожу, либо для картинок, либо карусель. Мне необходимо что бы менялось свойство display, то есть все абсолютно как при обычных вкладках, только смена display:none осуществляется кнопками вперед/назад по кругу, а не как у классических вкладок где каждой вкладке соответствует своя кнопка.

рони · #4 (**permalink**) 26.02.2020, 22:29

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>

рони · #5 (**permalink**) 26.02.2020, 22:32

Сообщение от TarasL85

Все что нахожу, либо для картинок, либо карусель.

везде один алгоритм и в примере выше, смотрите строка 25 пост#4

TarasL85 · #6 (**permalink**) 26.02.2020, 23:03

Просто нет слов, это именно то что мне так нужно! Спасибо огромное, даже не ожидал так быстро получить помощь!!! Так как у меня сайт в большей степени текст, это очень сильно поможет улучшить его восприятие и разнообразит.

Форум

Справочник

Discord чат

Курсы javascript