Изменять данные в одном блоке, в зависимости от другого
Есть блок
<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 у выбранного из списка элемента. |
De12,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
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>
|
| Часовой пояс GMT +3, время: 07:53. |