Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.02.2020, 21:54
Новичок на форуме
Отправить личное сообщение для TarasL85 Посмотреть профиль Найти все сообщения от TarasL85
 
Регистрация: 18.02.2020
Сообщений: 9

открытие скрытых 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>

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

Подскажите пожалуйста такой код.
Ответить с цитированием
  #2 (permalink)  
Старый 26.02.2020, 22:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

искать другие примеры "простейшая" "простейший"
Ответить с цитированием
  #3 (permalink)  
Старый 26.02.2020, 22:28
Новичок на форуме
Отправить личное сообщение для TarasL85 Посмотреть профиль Найти все сообщения от TarasL85
 
Регистрация: 18.02.2020
Сообщений: 9

Все что нахожу, либо для картинок, либо карусель. Мне необходимо что бы менялось свойство display, то есть все абсолютно как при обычных вкладках, только смена display:none осуществляется кнопками вперед/назад по кругу, а не как у классических вкладок где каждой вкладке соответствует своя кнопка.
Ответить с цитированием
  #4 (permalink)  
Старый 26.02.2020, 22:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

кнопки вперёд назад
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от TarasL85
Все что нахожу, либо для картинок, либо карусель.
везде один алгоритм и в примере выше, смотрите строка 25 пост#4
Ответить с цитированием
  #6 (permalink)  
Старый 26.02.2020, 23:03
Новичок на форуме
Отправить личное сообщение для TarasL85 Посмотреть профиль Найти все сообщения от TarasL85
 
Регистрация: 18.02.2020
Сообщений: 9

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
открытие div и смена текста в a (ссылка) rognarek Events/DOM/Window 9 03.08.2018 14:50
Скрытие/ Открытие блока DIV по нажатию на PNG картинку dunakov Общие вопросы Javascript 11 22.04.2017 10:31
Открытие содержимого div в новом окне BARABANTEMO Общие вопросы Javascript 7 23.11.2015 08:35
открытие и скрытие div при выборе другого div veetal Элементы интерфейса 8 25.08.2015 16:07
Выгрузка скрытых DIV в другой DIV поочередно. vasa666 Общие вопросы Javascript 4 24.12.2014 07:50