Форум

De12 · #1 (**permalink**) 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 у выбранного из списка элемента.

рони · #2 (**permalink**) 26.04.2021, 01:11

De12,
Пожалуйста, отформатируйте свой код!

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

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

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

рони · #3 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript