Почему не меняется цвет элемент при клике на другой элемент?

Question

[Norum]

Я хочу, чтобы при клике на один из li в .sidebar-menu один из кружков-элементов li в .sidebar-nav менял цвет фона на белый, путем добавления к нему класса .active-white, но почему то это не работает. Ведь я прописал, что при нажатии на первый li с id=business-card, к элементу li c классом .business-card добавляется класс .active-white, который и меняет цвет фона кружка навигации. В чем ошибка?



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

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

active-white {
    background-color:  #fff;
    transition: 0.3s;
}

$('#business-card').on('click', function() {
       $('.business-card').toggleClass('active-white');
   });

Comments

[Ankhena]

Потому что это #business-card - селектор по id. Такого элемента у вас в коде нет.
Селекторы по атрибуту пишутся не так.

Но вы же не собираетесь писать 9 одинаковых скриптов?
Вам нужно обрабатывать клик по всем ссылкам внутри меню, использовать $(this), получать у него href. Убирать из полученного решетку, искать li с полученным классом. И затем добавлять ему модификатор active. В называниях классов лучше не использовать названия цветов, за редким исключением, когда это именно цвета, а не состояние.

Ещё, я думаю, что кругляшки должны быть интерактивными, а не просто li.
А если кругляшки всё же не интерактивны, а являются украшением, то переделать их на псевдо.

[Norum]

Ankhena, обрабатывать клик по всем ссылкам внутри меню -это вы имеете ввиду цикл?

[Ankhena]

Norum, each

[Norum]

Ankhena, мне подсказали другой способ, так как я не понял, как это делается через each. Но у меня вопрос, правильно ли я понял код?

$('.sidebar-menu li a').on('click', function() {

        var index_ = $(this).closest("li").index() //get index
        $('.sidebar-nav li').removeClass('actived'); //remove from other
        $(".sidebar-nav li:eq(" + index_ + ")").addClass('actived'); //add class where index is same
    });

При нажатии на ссылку в .sidebar-menu происходит событие:
1) Объявляется переменная 'index', в которой с помощью $(this) заключается сам элемента на который я нажал
2)От нажатого элемента $(this) вверх по DOM дереву c помощью метода closest() идет поиск ближайшего селектора li и с помощью метода index() получение его порядкового номера
3) С помощью .removeClass('actived') у всех остальных li-элементов в .sidebar-nav удаляется класс actived
4) $(".sidebar-nav li:eq(" + index_ + ")").addClass('actived') эту строчку я не понял, кроме того, что добавляется класс actived

Вопрос: Зачем так смешивать в этом коде eq и index?

[Ankhena]

Norum,

Зачем так смешивать в этом коде eq и index?

Как вы предлагаете eq работать без индекса?
Объясните свою мысль и что именно смущает?

Answer 1

[Алексей Дубровин]

У вас нет элемента на который вешается событие onclick
$('#business-card')