Javascript скрыть-показать текст при нажатии на ссылку?

Question

[ganjo888]

Есть 3 кнопки ссылки с разными id,под ссылками должен быть список в виде текста (li) Нужно при нажатии на первую ссылку появлялся текст(именно для этой ссылке), при нажатии на вторую ссылку исчезал первый текст и появлялся второй , с третей ссылкой аналогично. Интересует именно javascript а не jquery

Answer 1

[po5epT]

<div class="btn">
<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
</div>

<ul class="list" data-id="1">
<li>...</li>
</ul>
<ul class="list" data-id="2">
<li>...</li>
</ul>
<ul class="list" data-id="3">
<li>...</li>
</ul>

window.onload = function () {


  let btnGroup = document.querySelector(".btn");
  let lists = document.querySelectorAll(".list");

  btnGroup.addEventListener("click", function(e){
  e.preventDefault();

  [].slice.call(lists).forEach(function(it){
    it.classList.add("hide");
  })

  let id = e.target.id;
  let ul = document.querySelector('[data-id="'+id+'"]');

    ul.classList.remove('hide');
  });
}

Answer 2

[Дмитрий Пыркин]

задать спискам атрибут с id ссылки, и при нажатии обращаться к этому атрибуту

Comments

[ganjo888]

можно пример?