Javascript-форум - Переключение между "li"

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Переключение между "li" (https://javascript.ru/forum/xhtml-html-css/71664-pereklyuchenie-mezhdu-li.html)

Переключение между "li"

Есть собственно html код
div (с неким классом), внутри которого ul (без класса), li (без класса).
Как с помощью того же JS, Jquery, Сделать так, что бы можно было переключаться между тегами li?
(кнопки: предыдущая запись, следующая запись).
Показывать по одному должно. (предыдущий - следующие скрыты).

похоже, но не то увы((

AnDit,

Цитата:

Сообщение от рони

заведите переменную для индекса активной картинки и меняйте только её.
функций должно быть только две, одна изменить индекс, вторая показать картинку с этим индексом.

замените картинку на li, что не так?

Вот фрагмент кода, берутся записи из БД.
Мб нужно другим способом...
__________________________________________________ ______
<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>

AnDit,
можно html результат, а не php?

<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>

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>

Спасибо огромное. Сейчас по пробую.