Вход

Просмотр полной версии : Изменять данные в одном блоке, в зависимости от другого

De12
25.04.2021, 23:55
Есть блок

<ul class="price">
<li data-link="link1" class="active">1</li>
<li data-link="link2" >2</li>
<li data-link="link3" >3</li>
<li data-link="link4" >4</li> </ul>

И рядом есть ссылка <a href="link1">Кнопка</a>

Список ul оформлен как селекты и при выборе какого-то из элемента списка, ему присваивается класс active, нужно что-бы в href="" у ссылки подтягивалась из параметра data-link у выбранного из списка элемента.
рони
26.04.2021, 01:11
De12,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:


... минимальный код страницы с вашей проблемой


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
рони
26.04.2021, 01:19
De12,
<!DOCTYPE html>
<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.active {
background-color: #FF0000;
color: #FFFFFF;
}
</style>
</head>

<body>
<ul class="price">
<li data-link="link1" class="active">1</li>
<li data-link="link2">2</li>
<li data-link="link3">3</li>
<li data-link="link4">4</li>
</ul>
<a href="link1">Кнопка</a>
<script>
document.querySelector(".price")
.addEventListener("click", function(event) {
let link = event.target.dataset.link;
if (link) {
this.querySelector(".active").classList.remove("active");
event.target.classList.add("active");
document.querySelector("a").href = link;
}
});
</script>
</body>

</html>