Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Проблема с перелистыванием div блоков (https://javascript.ru/forum/misc/73448-problema-s-perelistyvaniem-div-blokov.html)

Ty_Meow 16.04.2018 23:27
Проблема с перелистыванием div блоков
 
Здравствуйте.
Есть код:
pages = 1;
function listNext(page) {
  if (page == 1)
    prev_page = pages;
  else
    prev_page = page-1;
  if (page == pages)
    next_page = 1;
  else
    next_page = page+1;
  prev_id = "page_" + prev_page;
  prev_elem = document.getElementById(prev_id);
  prev_elem.style.display = "none";
  
  id = "page_" + page;
  elem = document.getElementById(id);
  elem.style.display = "block";
  
}


<div class="btn_back"><</div>
	       <div class="btn_forward" onclick="listNext(2)">></div>
<div id="page_1">
	<h3>Апрель 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 26</div>
				</li>
				<li class="day other-month">
					<div class="date">Вторник, 27</div>
				</li>
				<li class="day other-month">
					<div class="date">Среда, 28</div>
				</li>
				<li class="day other-month">
					<div class="date">Четверг, 29</div>
				</li>
				<li class="day other-month">
					<div class="date">Пятница, 30</div>
				</li>
				<li class="day other-month">
					<div class="date">Суббота, 31</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 1</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul>
<div id="page_2">
	<h3>Май 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 30</div>
				</li>
				<li class="day">
					<div class="date">Вторник, 1</div>
				</li>
				<li class="day">
					<div class="date">Среда, 2</div>
				</li>
				<li class="day">
					<div class="date">Четверг, 3</div>
				</li>
				<li class="day">
					<div class="date">Пятница, 4</div>
				</li>
				<li class="day">
					<div class="date">Суббота, 5</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 6</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul>

При нажатии на кнопку с классом btn_forward - Js перелистывает содержимое с <div id="page_1"> на <div id="page_2">.
Подскажите пожалуйста, как переписать код js так чтобы он возвращал с <div id="page_2"> на <div id="page_1">. Хочу сделать календарь, застрял на переходе по месяцам. Всю голову уже сломал :agree:
Заранее спасибо.

рони 16.04.2018 23:39
Ty_Meow,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>
var index = 0, len = 2;
function listNext() {
  var id = "page_" + (index + 1);
  var elem = document.getElementById(id);
  elem.style.display = "none";
  index++;
  if(index == len) index = 0;
  id = "page_" + (index + 1);
  elem = document.getElementById(id);
  elem.style.display = "block";
}

  </script>
</head>

<body>
<div class="btn_back"><</div>
	       <div class="btn_forward" onclick="listNext()">></div>
<div id="page_1">
	<h3>Апрель 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 26</div>
				</li>
				<li class="day other-month">
					<div class="date">Вторник, 27</div>
				</li>
				<li class="day other-month">
					<div class="date">Среда, 28</div>
				</li>
				<li class="day other-month">
					<div class="date">Четверг, 29</div>
				</li>
				<li class="day other-month">
					<div class="date">Пятница, 30</div>
				</li>
				<li class="day other-month">
					<div class="date">Суббота, 31</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 1</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul></div>
<div id="page_2">
	<h3>Май 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 30</div>
				</li>
				<li class="day">
					<div class="date">Вторник, 1</div>
				</li>
				<li class="day">
					<div class="date">Среда, 2</div>
				</li>
				<li class="day">
					<div class="date">Четверг, 3</div>
				</li>
				<li class="day">
					<div class="date">Пятница, 4</div>
				</li>
				<li class="day">
					<div class="date">Суббота, 5</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 6</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul></div>

</body>
</html>

laimas 16.04.2018 23:39
А они что оба сразу на странице? Календарь, это ведь запросили месяц/год следующий (можно в общем то и по любому срезу времени перемещаться), запрашиваемое динамически строится.

Ty_Meow 17.04.2018 10:53
рони,
Скажите пожалуйста, как переписать код чтобы месяцы можно было листать назад по кнопке <div class="btn_back"><</div> ?
Если есть 3 месяца. Чтобы стрелка возвращала с Мая на Апрель и с Апреля на Март, без возврата в исходный месяц. 
<div id="page_1">
	<h3>Март 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 26</div>
				</li>
				<li class="day other-month">
					<div class="date">Вторник, 27</div>
				</li>
				<li class="day other-month">
					<div class="date">Среда, 28</div>
				</li>
				<li class="day other-month">
					<div class="date">Четверг, 29</div>
				</li>
				<li class="day other-month">
					<div class="date">Пятница, 30</div>
				</li>
				<li class="day other-month">
					<div class="date">Суббота, 31</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 1</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul></div>
<div id="page_2">
	<h3>Апрель 2018</h3>
			<ul class="days">
				<li class="day other-month">
					<div class="date">Понедельник, 30</div>
				</li>
				<li class="day">
					<div class="date">Вторник, 1</div>
				</li>
				<li class="day">
					<div class="date">Среда, 2</div>
				</li>
				<li class="day">
					<div class="date">Четверг, 3</div>
				</li>
				<li class="day">
					<div class="date">Пятница, 4</div>
				</li>
				<li class="day">
					<div class="date">Суббота, 5</div>
				</li>
				<li class="day__event">
					<div class="date">Воскресенье, 6</div>
					<div class="event">
						<div class="event-desc">
							<br></br>
						</div>
						<div class="event-time"></div>
					</div>
				</li>
			</ul></div>
<div id="page_3">	
	<h3>Май 2018</h3>		
			<ul class="days">
				<li class="day">
					<div class="date">7</div>
				</li>
				<li class="day">
					<div class="date">8</div>
				</li>
				<li class="day">
					<div class="date">9</div>
				</li>
				<li class="day">
					<div class="date">10</div>
				</li>
				<li class="day">
					<div class="date">11</div>
				</li>
				<li class="day">
					<div class="date">12</div>
				</li>
			</ul></div>

рони 17.04.2018 11:04
Ty_Meow,
не понимаю

Ty_Meow 17.04.2018 11:11
рони,
Есть ваш js код: 
var index = 0, len = 3;
function listNext() {
  var id = "page_" + (index + 1);
  var elem = document.getElementById(id);
  elem.style.display = "none";
  index++;
  if(index == len) index = 0;
  id = "page_" + (index + 1);
  elem = document.getElementById(id);
  elem.style.display = "block";
}

Он отлично листает мои месяцы вперед друг за другом по кнопке <div class="btn_forward" onclick="listNext()">></div> Спасибо за него )
Но мне еще нужно как то и назад их листать :) По нажатию этой кнопки <div class="btn_back" onclick="listPrev()"><</div>
Так вот , как js код изменить нужно , чтобы месяцы листались назад?

рони 17.04.2018 11:23
Ty_Meow,
строки 6,7
index--;
 if(index < 0) index = len - 1;

Ty_Meow 17.04.2018 17:28
рони,
Спасибо большое!


Часовой пояс GMT +3, время: 16:58.