Как сделать так, чтобы при нажатии на один из элементов меню, у другого менялся цвет?

Question

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

Сам сайт ct03638.tmweb.ru

Весь код jsfiddle.net/pjzs9uxw/

.actived {
    background-color:  #fff;
    transition: 0.3s;
}

 <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>

Answer 1

// Цепляем один обработчик ко всему меню
document.querySelector("ul.sidebar-menu").addEventListener("click", function(e) {
  // выполняем код, только если кликнули по элементу <a>
  if (e.target.tagName === 'A') {
    // Снимаем все активные метки
    const items = document.querySelectorAll('.sidebar-nav li.actived');
    for (let i = 0; i < items.length; i++) {
      items[i].classList.remove("actived");
    }
    // узнаем id родительского элемента
    const id = e.target.parentNode.id;
    // Добавляем флаг активности нужному элементу
    document.querySelector('.sidebar-nav li.' + id).classList.add("actived");
  }
});

.actived {
  background-color: #fff;
  transition: 0.3s;
}

.sidebar-nav {
  list-style: none;
}

.sidebar-nav li:before {
  content: "\2022";
  color: black;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.sidebar-nav li.actived:before {
  color: blue;
}

<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>

БЛОГ НА HUSL

Как сделать так, чтобы при нажатии на один из элементов меню, у другого менялся цвет?

Ответы (1 шт):