Отображение одного <div>
В общем, у меня в БД есть записи, которые я вывожу на страницу в блоки "div".
<div class="container panel panel-primary">
<?php foreach ($Questions as $Quest) { ?>
<div id="<?=$Quest['id_rec']?>">
<div class="name_question" align="center">
<h3><b><i> <?= $Quest->name_quest; ?> </i></b></h3>
</div> <!-- <div class="name_question"> -->
<div class="text_question">
<?= $Quest->text_quest; ?>
</div> <!-- <div class="text_question"> -->
<div class="answer">
<?php foreach ($Quest->squizqa as $Answer) { ?>
<p>
<input type="checkbox" name="answer" value="<?=$Answer['id_rec']?>"> <?= $Answer->text_answer ?>
</p>
<?php } ?>
</div> <!-- <div class="answer"> -->
</div>
<?php } ?>
</div>У меня возник следующий вопрос. Как мне сделать так, что бы сначала показывался первый блок, при нажатии на клавишу "Следующий" или "Предыдущий", отображался следующий блок или предыдущий соответственно? Понимаю что надо подключать js и там прятать блоки и выводить их по порядку, но не могу найти конкретного примера с подобной реализацией, что бы посмотреть как это работает и как это реализовывать. Прошу вашей помощи, буду очень благодарен.
Сделал что у каждого "div" есть свой уникальный id адрес id="$Quest['id_rec']"
Как и просили, вот пример:
$(function() {
var items = '.panel__item',
$items = $(items),
$btnPrev = $('.show-prev'),
$btnNext = $('.show-next');
$btnPrev.on('click', function() {
showBlock('prev');
})
$btnNext.on('click', function() {
showBlock('next');
})
function showBlock(current) {
var $active = $(items + '.active'),
index = $active.index();
if(current == 'prev') {
if(index == 0) {
index = $items.length - 1;
} else {
index--;
}
} else {
if(index == $items.length - 1) {
index = 0;
} else {
index++;
}
}
$items.removeClass('active');
$items.eq(index).addClass('active')
}
}).panel__item {
display: none;
}
.panel__item.active {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container panel panel-primary">
<div class="panel__item active" id="1">block1</div>
<div class="panel__item" id="2">block2</div>
<div class="panel__item" id="3">block3</div>
<div class="panel__item" id="4">block4</div>
<div class="panel__item" id="5">block5</div>
</div>
<a class="btn show-prev">Показать пред.</a>
<a class="btn show-next">Показать след.</a>Сделал так, чтобы была бесконечная/круговая прокрутка, если этого не надо, в условиях можете поиграться.
Просто создаешь класс в котором прописываешь свойства, которые прячут дивку (visibility: false и/или display: none;), а в самом диве прописываешь обратное (т.е. true и block, соответственно). Потом с помощью jquery на нажатие следующий изменяешь классы дивов (ссылки внизу, если что) соответственно тому, какой ты хочешь показать(можно, кстати, ещё и z-index приписать в класс), а какие скрыть.
Смотри в этом направлении:
.toggleClass() - изменение класса элемента
.addClass( ) - добавление класса
.removeClass( ) - удаление класса
-
19:12
-
21:12
Оборудование для ресторана: новинки профессиональной кухонной техники
-
22:17
-
22:13
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
-
20:12
-
20:06
-
19:59
-
19:51
-
19:43
- Почему SERVER_ADDR имеет не тот IP 48153 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30588 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 24097 visits
- Как через css изменить цвет png изображения? 10431 visits
- Blob video url download 10019 visits
- Php curl запрос через прокси с авторизацией 9302 visits
- Работа с captcha vk api 8162 visits
© "hostciti.net" 27.4.2025 | 23:32