Форум

Tempest · #1 (**permalink**) 04.07.2021, 14:11

Как сделать, чтобы при клике на один из li в .sidebar-menu один из кружков-элементов li в .sidebar-nav менял цвет фона на белый, путем добавления к нему класса .actived? Причем, когда происходит нажатие на один из li в .sidebar-menu, кружок из .sidebar-nav должен менять цвет в соответствии с тем элементом, на который было совершено нажатие. Например, нажали на "Сайт-визитка" и загорается первый кружок, нажали на "Интернет-магазин" и загорается третий кружок.

Сам сайт ct03638.tmweb.ru
Весь код https://jsfiddle.net/pjzs9uxw/

<section class="services" id="services">
            <div class="wrapper">
                <div class="content">
                    <div class="sidebar">
                        <h3>Наши услуги</h3>
                        <ul class="sidebar-menu">
                            <li id="business-card"><a href="#">Сайт-визитка</a></li>
                            <li id="landing"><a href="#">Landing page</a></li>
                            <li id="market"><a href="#">Интернет-магазин</a></li>
                            <li id="corp"><a href="#">Корпоративный сайт</a></li>
                            <li id="bitrix"><a href="#">1C Битрикс</a></li>
                            <li id="advertising"><a href="#">Контекстная реклама</a></li>
                            <li id="seo"><a href="#">SEO оптимизация</a></li>
                            <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                            <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                        </ul>
                        <ul class="sidebar-nav">
                            <li class="business-card"></li>
                            <li class="landing"></li>
                            <li class="market"></li>
                            <li class="corp"></li>
                            <li class="bitrix"></li>
                            <li class="advertising"></li>
                            <li class="seo"></li>
                            <li class="promotion"></li>
                            <li class="marketing"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

рони · #2 (**permalink**) 04.07.2021, 15:23

Tempest,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .actived {
            background-color: rgba(255, 0, 0, 1);
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const menu = document.querySelector(".sidebar-menu");
            const menuLi = [...menu.querySelectorAll("li")];
            const nav = document.querySelector(".sidebar-nav");
            const navLi = [...nav.querySelectorAll("li")];
            let index = 0;
            const setActive = i => {
                menuLi[index].classList.remove("actived");
                navLi[index].classList.remove("actived");
                index = i;
                menuLi[index].classList.add("actived");
                navLi[index].classList.add("actived");
            }
            menu.addEventListener("click", function(event) {
                event.preventDefault();
                let target = event.target;
                if (target = target.closest("li")) {
                    let i = menuLi.indexOf(target);
                    setActive(i);
                }
            });
            nav.addEventListener("click", function(event) {
                event.preventDefault();
                let target = event.target;
                if (target = target.closest("li")) {
                    let i = navLi.indexOf(target);
                    setActive(i);
                }
            });
        });
    </script>
</head>

<body>
    <section class="services" id="services">
        <div class="wrapper">
            <div class="content">
                <div class="sidebar">
                    <h3>Наши услуги</h3>
                    <ul class="sidebar-menu">
                        <li id="business-card"><a href="#">Сайт-визитка</a></li>
                        <li id="landing"><a href="#">Landing page</a></li>
                        <li id="market"><a href="#">Интернет-магазин</a></li>
                        <li id="corp"><a href="#">Корпоративный сайт</a></li>
                        <li id="bitrix"><a href="#">1C Битрикс</a></li>
                        <li id="advertising"><a href="#">Контекстная реклама</a></li>
                        <li id="seo"><a href="#">SEO оптимизация</a></li>
                        <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                        <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                    </ul>
                    <ul class="sidebar-nav">
                        <li class="business-card"></li>
                        <li class="landing"></li>
                        <li class="market"></li>
                        <li class="corp"></li>
                        <li class="bitrix"></li>
                        <li class="advertising"></li>
                        <li class="seo"></li>
                        <li class="promotion"></li>
                        <li class="marketing"></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript