Форум

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>

Rise · #3 (**permalink**) 05.07.2021, 02:03

Tempest, чел, это заход на горизонтальный слайдер, в том плагине это тоже есть, в прошлой теме у тебя был вертикальный. Всё это там реализовано, и еще много чего, что ты еще не понимаешь, что это то, что ты и пытаешься сделать. Просто надо посмотреть примеры и почитать доки. Тогда текущая задача решится всего в несколько строк кода:

#menu1 {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 50px;
    text-align: center;
    background: rgba(0,0,0,0.2);
}
#menu1 li {
    display: inline-block;
    margin: 10px;
    background: rgba(255,255,255, 0.5);
}
#menu1 li.active {
    background: rgba(0,0,0,0.5);
}
#menu1 li a {
    display: block;
    padding: 5px;
}

#menu2 li {
    margin: 2px;
    background: rgba(255,255,255,0.5);
}
#menu2 li.active {
    background: rgba(0,0,0,0.5);
}
#menu2 li a {
    display: block;
}

#section2 .sidebar {
    float: left;
    width: 200px;
    height: 100%;
    padding-top: 50px;
    overflow: hidden;
    background: lightblue;
}
#section2 .content {
    margin-left: 200px;
    background: blue;
}

<ul id="menu1">
    <li data-menuanchor="page1" class="active"><a href="#page1">Page 1 link</a></li>
    <li data-menuanchor="page2"><a href="#page2">Page 2 link</a></li>
    <li data-menuanchor="page3"><a href="#page3">Page 3 link</a></li>
</ul>

<div id="fullpage">
    <div class="section" id="section1" data-anchor="page1" data-tooltip="Page 1">Page 1 content</div>
    <div class="section" id="section2" data-anchor="page2" data-tooltip="Page 2">
        <div class="sidebar">
            <ul id="menu2">
                <li data-menuanchor="page2/subpage1" class="active"><a href="#page2/subpage1">Page 2.1 link</a></li>
                <li data-menuanchor="page2/subpage2"><a href="#page2/subpage2">Page 2.2 link</a></li>
                <li data-menuanchor="page2/subpage3"><a href="#page2/subpage3">Page 2.3 link</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="slide" id="slide1" data-anchor="subpage1">Page 2.1 content</div>
            <div class="slide" id="slide2" data-anchor="subpage2">Page 2.2 content</div>
            <div class="slide" id="slide3" data-anchor="subpage3">Page 2.3 content</div>
        </div>
    </div>
    <div class="section" id="section3" data-anchor="page3" data-tooltip="Page 3">Page 3 content</div>
</div>

var myFullpage = new fullpage('#fullpage', {
    menu: '#menu1',
    sectionsColor: ['red', 'brown', 'green'],
    navigation: true,
    navigationPosition: 'right',
    slidesNavigation: true,
    controlArrows: false,
    onSlideLeave: function(section, origin, destination, direction){
        if (section.anchor == 'page2') {
            $('#menu2 .active').removeClass('active');
            $('#menu2 [data-menuanchor="'+section.anchor+'/'+destination.anchor+'"]').addClass('active');
        }
    }
});

Форум

Справочник

Discord чат

Курсы javascript