Как сделать несколько кнопок на сайте, при нажатие на которые в определенный див будет добавляться определенный текст и скрывать предыдущий текст?

Question

[Иван]

Есть на сайте такой элемент, хочу сделать чтобы при нажатие на маленькие круги, в центре большого появлялся текст, у каждого свой текст, при этом предыдущий текст исчезал. Знаю что это можно реализовать jquery, но не представляю как это сделать

Answer 1

[Виталий Инчин ☢]

Каждому кругу добавим data-атрибут:

<tag data-word="Слово">

А далее немного jQuery:

$(document).on("click", selector, function(){
   $(output).text(this.dataset.word);
   //Или $(this).attr("data-word");
});

selector - CSS селектор круглых блоков.
output - селектор блока, в который будет выводится текст

Comments

[hjk]

А ещё можно $(this).data('word'). Мне так как-то привычнее, хотя это уже детали.

Answer 2

[Антон Федорян]

Знаю что это можно реализовать jquery, но не представляю как это сделать

Взаимоисключающие параграфы? А как гуглом пользоваться догадываетесь?
Например, вот такой запрос выдает вполне логичный ответ