16.04.2018, 23:27
|
|
Интересующийся
|
|
Регистрация: 06.01.2017
Сообщений: 17
|
|
|
Проблема с перелистыванием 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">. Хочу сделать календарь, застрял на переходе по месяцам. Всю голову уже сломал 
Заранее спасибо.
|
|
16.04.2018, 23:39
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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>
|
|
16.04.2018, 23:39
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
А они что оба сразу на странице? Календарь, это ведь запросили месяц/год следующий (можно в общем то и по любому срезу времени перемещаться), запрашиваемое динамически строится.
|
|
17.04.2018, 10:53
|
|
Интересующийся
|
|
Регистрация: 06.01.2017
Сообщений: 17
|
|
рони,
Скажите пожалуйста, как переписать код чтобы месяцы можно было листать назад по кнопке <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>
Последний раз редактировалось Ty_Meow, 17.04.2018 в 11:02.
|
|
17.04.2018, 11:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Ty_Meow,
не понимаю
|
|
17.04.2018, 11:11
|
|
Интересующийся
|
|
Регистрация: 06.01.2017
Сообщений: 17
|
|
рони,
Есть ваш 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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Ty_Meow,
строки 6,7
index--;
if(index < 0) index = len - 1;
|
|
17.04.2018, 17:28
|
|
Интересующийся
|
|
Регистрация: 06.01.2017
Сообщений: 17
|
|
|
рони,
Спасибо большое!
|
|
|
|
