0

У меня есть блок в котором при клике на ссылки меняется информация. Кликая на ссылку Блок 1 я попадаю в Блок 1 и там есть ссылка на Блок 3. Как мне реализовать чтобы при клике на стрелку в Блоке 3 я возвращался из Блока 3 в Блок 1 и из Блока 1 в основной блок?

Вот мой текущий код:

var link = document.querySelector('#link-1');
var linkTwo = document.querySelector('#link-2');

link.addEventListener('click', function() {
  document.querySelector('#selected').style.display = 'none';
  document.querySelector('#block_one').style.display = 'block';
});

linkTwo.addEventListener('click', function() {
  document.querySelector('#selected').style.display = 'none';
  document.querySelector('#block_two').style.display = 'block';
});
.container {
  width: 300px;
  height: 300px;
  background: gray;
  padding-top: 10px;
}

.top {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.arrow {
  margin-right: 10px;
}

.body {
  text-align: center;
}
<div class="container">
  <div id="selected">
    <div class="top">
      <div class="text">Выбор действия</div>
    </div>
    <div class="body">
      <a href="#" id="link-1" class="body__link">Блок 1</a>
      <a href="#" id="link-2" class="body__link">Блок 2</a>
    </div>
  </div>

  <div id="block_one" style="display: none;">
    <div class="top">
      <div class="arrow">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="text">Блок - 1</div>
    </div>
    <div class="body">
      Здесь располагается контент блока 1
      <a href="#" id="block_3">Перейти в Блок 3</a>
    </div>
  </div>

  <div id="block_two" style="display: none;">
    <div class="top">
      <div class="arrow">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="text">Блок - 2</div>
    </div>
    <div class="body">
      Здесь располагается контент блока 2
      <a href="#" id="block_4">Перейти в Блок 4</a>
    </div>
  </div>

</div>

1 ответ 1

0

Ну если без какого-то хитрого смысла то можно так сделать

var links = document.querySelectorAll('.link');
var linksBack = document.querySelectorAll('.fas');
var blocks = document.querySelectorAll('.block');
links.forEach(function(item) {
  item.addEventListener('click', function(e) {
    var href = e.target.getAttribute('href');
    var id = href.replace('#', '');
    showBlock(id);
  });
});

linksBack.forEach(function(item) {
  item.addEventListener('click', function(e) {
    showBlock(e.target.getAttribute('data-link'));
  });
});

function showBlock(id) {
  var block = document.getElementById(id);
  var activeBlock = document.querySelector('.block.active');
  if (block === null){
    return;
  }
  if (activeBlock !== null) {
    activeBlock.classList.remove('active');
  }  
  block.classList.add('active');
}
.container {
  width: 300px;
  height: 300px;
  background: gray;
  padding-top: 10px;
}

.top {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.arrow {
  margin-right: 10px;
}

.body {
  text-align: center;
}

.block {
  display: none;
}

.active {
  display: block;
}
<script src="https://use.fontawesome.com/2669957b7f.js"></script>
<div class="container">
  <div id="back" class="block active">
    <div class="top">
      <div class="text">Выбор действия</div>
    </div>
    <div class="body">
      <a href="#first" class="body__link link">Блок 1</a>
      <a href="#second" class="link">Блок 2</a>
    </div>
  </div>

  <div id="first" class="block">
    <div class="top">
      <div class="arrow">
        <i class="fas fa-chevron-left" data-link="back"></i>
      </div>
      <div class="text">Блок - 1</div>
    </div>
    <div class="body">
      Здесь располагается контент блока 1
      <a href="#thirt" class="link">Перейти в Блок 3</a>
    </div>
  </div>

  <div id="second" class="block">
    <div class="top">
      <div class="arrow">
        <i class="fas fa-chevron-left" data-link="back"></i>
      </div>
      <div class="text">Блок - 2</div>
    </div>
    <div class="body">
      Здесь располагается контент блока 2
      <a href="#forth" class="link">Перейти в Блок 4</a>
    </div>
  </div>
  
  <div id="thirt" class="block">
    <div class="top">
      <div class="arrow">
        <i class="fas fa-chevron-left" data-link="first"></i>
      </div>
      <div class="text">Блок - 3</div>
    </div>
    <div class="body">
      Здесь располагается контент блока 3
      <a href="#first" class="link">Перейти в Блок 1</a>
    </div>
  </div>

</div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.