Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2017, 14:44
Новичок на форуме
Отправить личное сообщение для AnDit Посмотреть профиль Найти все сообщения от AnDit
 
Регистрация: 04.12.2017
Сообщений: 5

Переключение между "li"
Есть собственно html код
div (с неким классом), внутри которого ul (без класса), li (без класса).
Как с помощью того же JS, Jquery, Сделать так, что бы можно было переключаться между тегами li?
(кнопки: предыдущая запись, следующая запись).
Показывать по одному должно. (предыдущий - следующие скрыты).
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2017, 14:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,755

AnDit,
https://javascript.ru/forum/dom-wind...tml#post451649
https://javascript.ru/forum/dom-wind...tml#post456841
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2017, 15:20
Новичок на форуме
Отправить личное сообщение для AnDit Посмотреть профиль Найти все сообщения от AnDit
 
Регистрация: 04.12.2017
Сообщений: 5

похоже, но не то увы((
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2017, 15:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,755

AnDit,
Сообщение от рони
заведите переменную для индекса активной картинки и меняйте только её.
функций должно быть только две, одна изменить индекс, вторая показать картинку с этим индексом.
замените картинку на li, что не так?
Ответить с цитированием
  #5 (permalink)  
Старый 04.12.2017, 16:04
Новичок на форуме
Отправить личное сообщение для AnDit Посмотреть профиль Найти все сообщения от AnDit
 
Регистрация: 04.12.2017
Сообщений: 5

Вот фрагмент кода, берутся записи из БД.
Мб нужно другим способом...
__________________________________________________ ______
<div class="blocktxt">
<div class="txt" id="scroll">


<?php
$catquery = new WP_Query( 'cat=12&posts_per_page=-1' );

while($catquery->have_posts()) : $catquery->the_post();

?>
<ul>
<li>
<?php the_excerpt(); ?>
</li><br>
</ul>

<?php endwhile; ?>

</div>

</div>
Ответить с цитированием
  #6 (permalink)  
Старый 04.12.2017, 16:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,755

AnDit,
можно html результат, а не php?
Ответить с цитированием
  #7 (permalink)  
Старый 04.12.2017, 16:16
Новичок на форуме
Отправить личное сообщение для AnDit Посмотреть профиль Найти все сообщения от AnDit
 
Регистрация: 04.12.2017
Сообщений: 5

<div class="blocktxt">
<div class="txt" id="scroll">

<ul>
<li>
<p>текст1</p>
</li><br>
</ul>

<ul>
<li>
<p>текст2</p>
</li><br>
</ul>

<ul>
<li>
<p>текст3</p>
</li><br>
</ul>

</div>

</div>
Ответить с цитированием
  #8 (permalink)  
Старый 04.12.2017, 16:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,755

AnDit,
взято тут

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .blocktxt  ul{
       display: none;
     }
     .blocktxt  ul.active{
       display:  block;
     }
  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call(document.querySelectorAll(".blocktxt"), function(item) {
        var btn_prev = item.querySelector(".prev");
        var btn_next = item.querySelector(".next");
        var ul = item.querySelectorAll("ul");
        var len = ul.length - 1;
        var i = 0;

        function cleanout() {
            ul[i].classList.remove("active")
        }

        function addcls() {
            ul[i].classList.add("active")
        }

        function limit() {
            i < 0 && (i = len);
            i > len && (i = 0)
        }
        btn_prev.addEventListener("click", function() {
            cleanout();
            i--;
            limit();
            addcls()

        });
        btn_next.addEventListener("click", function() {
            cleanout();
            i++;
            limit();
            addcls()
        });
    })
});
  </script>
</head>

<body>
<div class="blocktxt"><div class="prev">предыдущий</div>
 <div class="txt" id="scroll">

 <ul class="active">
 <li>
 <p>текст1</p>
 </li><br>
 </ul>

 <ul>
 <li>
 <p>текст2</p>
 </li><br>
 </ul>

 <ul>
 <li>
 <p>текст3</p>
 </li><br>
 </ul>

 </div>
    <div class="next">следующий</div>
 </div>

</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 04.12.2017, 16:35
Новичок на форуме
Отправить личное сообщение для AnDit Посмотреть профиль Найти все сообщения от AnDit
 
Регистрация: 04.12.2017
Сообщений: 5

Спасибо огромное. Сейчас по пробую.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пошаговое введение данных и переключение между формами sergykor Элементы интерфейса 2 07.09.2015 13:53
Переключение между divами MCB Элементы интерфейса 4 30.10.2011 11:03
Переключение между областями stasq AJAX и COMET 1 07.09.2010 22:03
Переключение между блоками uncle_fedor Элементы интерфейса 1 10.01.2010 18:01
Отследить переключение между вкладками mrpoma Events/DOM/Window 9 02.02.2009 10:47