Всплывающие блоки по клику через js

174

19 сентября 2017, 06:14

Добрый вечер, коллеги!
Прошу помочь человеку, недавно начавшему изучать js. Есть задача - некая боковая навигация, состоящая из списка со ссылками, при клике на ссылку должен появляться блок со связанным по теме контентом, при клике на другую ссылку, блок исчезает, появляется другой. Задачу нужно решить посредством использования чистого js. Подскажите в какую сторону копать, какие темы смотреть?

На сколько я понимаю со своим уровнем логического мышления на данный момент - нужно задать переменную и собрать в нее массив со всеми совпадениями по классу ссылки и в другую переменную совпадения с классом блока (через getElementByClassName), после чего сравнить их и при совпадении индекса (полагаю через if) задать блоку класс c видимостью, а у других удалить. Единственное пока не понимаю как в эту схему приклеить клик по конкретной ссылке.

Спасибо.

Answer 1

По последнему вопросу о кликах - пример из lear.javascript не много изменен. А в остальном Вам уже ответил Cheg

  function handler1() { 
    //Делаете что-то с любым элементом 
    alert('Спасибо ещё раз!');     
  }; 
 
  function handler2() { 
    //Делаете что-то с любым элементом 
    alert('Спасибо ещё раз!'); 
  } 
   
  let redBtn = document.querySelector('.red-btn'); // получаем кнопку 
   
  redBtn.addEventListener("click", handler1); // вешаем обработчик, при клике вызывается функция handler1 
  elem.addEventListener("click", handler2); //  вешаем обработчик на input, при клике вызывается функция handler2

<input id="elem" type="button" value="Нажми меня"/> 
 
<button type="button" class="red-btn">Нажми</button>

Answer 2

ну вот с нахрапу как то так
тут логика какая...
если при клике класс у div такой же как у li то убираем класс hide иначе присваиваем оный.

const ul = document.querySelector('ul'); 
const divs = document.querySelectorAll('.click'); 
 
ul.addEventListener('click', el => { 
  switch (el.target.tagName) { 
    case 'LI': 
      const len = divs.length; 
      for (let i = 0; i < len; i++) { 
        if (divs[i].classList.contains(el.target.className)) { 
          divs[i].classList.remove('hide'); 
        } else { 
          divs[i].classList.add('hide'); 
        } 
      } 
      break 
  } 
});

.hide { 
  display: none; 
}

<ul> 
  <li class="item1">item 1</li> 
  <li class="item2">item 2</li> 
  <li class="item3">item 3</li> 
  <li class="item4">item 4</li> 
  <li class="item5">item 5</li> 
</ul> 
<div class="main"> 
  <div class="click item1 hide">item 1</div> 
  <div class="click item2 hide">item 2</div> 
  <div class="click item3 hide">item 3</div> 
  <div class="click item4 hide">item 4</div> 
  <div class="click item5 hide">item 5</div> 
</div>