Форум

AnDit · #1 (**permalink**) 04.12.2017, 15:44

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

рони · #2 (**permalink**) 04.12.2017, 15:56

AnDit,
https://javascript.ru/forum/dom-wind...tml#post451649
https://javascript.ru/forum/dom-wind...tml#post456841

AnDit · #3 (**permalink**) 04.12.2017, 16:20

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

рони · #4 (**permalink**) 04.12.2017, 16:29

AnDit,

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

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

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

AnDit · #5 (**permalink**) 04.12.2017, 17:04

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

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

AnDit · #7 (**permalink**) 04.12.2017, 17:16

<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, 17:24

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>

AnDit · #9 (**permalink**) 04.12.2017, 17:35

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

Форум

Справочник

Discord чат

Курсы javascript