Есть много дивов, изначально показан толко первый, остальные скрыты, внутри каждого есть ссылка при нажатии на которую открывается следующий див

Question

Есть 13 дивов, изначально показан толко первый, остальные скрыты, внутри каждого есть ссылка при нажатии на которую открывается следующий див, а предыдущие скрываются, задала первому класс active, все дивы в контейнере. Что то уперлась, не знаю как дальше...

    e.preventDefault();
    var container = $('.container');
       for (var i = 0; i < 13; i ++) {
    container.find('div').eq(i).next().toggleClass('active');}
  });```

Answer 1

Это можно сделать в Vanilla JavaScript

document.getElementById("link1").onclick = function() {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "block";
}

Мы регистрируем событие onClick на ссылку, и при его срабатывании скрываем первый div, и показываем 2 div

Осталось так сделать на всё divы, и всё

Answer 2

При правильном подходе неважно, сколько элементов в контейнере. Нужно найти текущий div (родитель ссылки, на которую было нажатие) и следующий за ним. Соответственно, меняем видимость этих элементов:

$('.container div').not(':first').hide();

$('.container div a').click(function(event) {
  let curDiv = $(event.target).parent();
  let nextDiv = curDiv.next();

  if (nextDiv.length) {
    $(nextDiv).show();
    $(curDiv).fadeOut();
  }
});

div {
  padding: 20px;
  border: 1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div><a href="#">Link 1</a></div>
  <div><a href="#">Link 2</a></div>
  <div><a href="#">Link 3</a></div>
  <div><a href="#">Link 4</a></div>
  <div><a href="#">Link 5</a></div>
  <div><a href="#">Link 6</a></div>
</div>

fadeOut() применил только для наглядности.

БЛОГ НА HUSL

Есть много дивов, изначально показан толко первый, остальные скрыты, внутри каждого есть ссылка при нажатии на которую открывается следующий див

Ответы (2 шт):