Как при нажатии на 1 из 4 кнопок проявить соответсвующий блок?

Question

[marcys]

Есть блок с текстом а рядом с ним 4 кнопки, при клике на 1 кнопку проявиться текст 1 . При клике на кнопку 2 появляеться соотвественно текст 2, при клике на кнопку 1 обратно выйдет текст 1. И так со всеми кнопками. Как подобное реализовать на jquery?

Answer 1

[Виктор Л]

<div id="text">тут</div>

<button id="1" class="button">1</button>
<button id="2" class="button">2</button>
<button id="3" class="button">3</button>
<button id="4" class="button">4</button>

const data = {
  1:'текст 1',
  2:'текст 2',
  3:'текст 3',
  4:'текст 4'
}

const buttons = [...document.querySelectorAll('.button')]

buttons.map(item => {
 item .addEventListener("click", function() {
  document.getElementById("text").innerHTML = 
  data[this.id]
 });
})

Comments

[Сергей Соколов]

отчего бы и кнопки не генерить программно из data ?

[Виктор Л]

Сергей Соколов, Привет, Сережа ну это на усмотрения Т.С. пусть генерит их использует jquery или vanilla js все в его руках дорогу я показал :)

Answer 2

[Денис Соколов]

https://denis-creative.com/jquery-tabs/