Как сделать чтобы появлялись разные блоки при нажатии?

Question

[IsayR]

Всем привет! Помогите, пожалуйста. Как видно на картинке мне нужно, чтобы при нажатии на определенную локацию, открывалась определенное описание, и при клике на другую локацию, старое убиралось и появлялось новое. И было бы здорово, если при загрузке страницы, было открыто одно из описаний, а не было пусто справа. Подскажите, как код в JS правильно написать, а то я полный новичок. Попробовала с присваиваниями класс active (display:none -> display"block), но там как-то криво все получается :(

Comments

[EugeneMedvedev]

А что становится кривым?

Answer 1

[EugeneMedvedev]

Но если не брать в расчёт, что что-то становится кривым:
// выбираем все названия городов на "карте"
const cities = document.querySelectorAll(".cyprus-city")

// функция-обработчик
const setCityActiveHandler = (id) => {
cities.forEach(city => {
// если не подходит айди из датасета, то только убираем класс active, если он вообще есть, и выходим из функции. датасет я использую в данном случае, потому что, скорее всего, вы используете генерацию html из html, а не из js. А понимать какой город кликнут как-то да надо, кроме как по сравниванию имён. поэтому вам нужно на города прописать атрибуты data-id="1", data-id="2"...
if (city.dataset.id != id) {
city.classList.contains('active') ? city.classList.remove('active') : ''
return
}
// если город имеет нужный айди, то ставим active
city.classList.add('active')
})
}

// вешаем слушатель события "клик" на каждое название города и нашу функцию-обработчик в роли коллбэка
cities.forEach(city => city.addEventListener('click', e => setCityActiveHandler(e.target.dataset.id)))

Comments

[EugeneMedvedev]

при этом чтобы при загрузке хоть один город был активным можно написать
cities[0].classList.add('active')
без функции или же в теле функции инициализации.