问如何使它使当你点击一个菜单项，另一个改变颜色？

EN

$('.sidebar-menu li a').on('click', function(e) {
  e.preventDefault()
  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
});

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

.sidebar-nav li {
  width: 7px;
  height: 7px;
  border: 1px solid black;
  border-radius: 50px;
  margin-right: 5px;
  cursor: pointer;
}

.sidebar-nav {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  margin-left: 120px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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>

const menuEle = document.querySelector("#side-menu");
let higlightedIndex = -1;

menuEle.addEventListener("click", (e) => {
  const listItem = e.target.closest("li");
  if (listItem) {
    const index = [...menuEle.children].indexOf(listItem);
    const list = document.querySelector("#sidebar-nav").children;
    if (higlightedIndex >= 0) {
      list[higlightedIndex].classList.remove("active");
    }
    list[index].classList.add("active");
    higlightedIndex = index;
  }
});

.active {
    background-color: #FAE93E;
}

.circle {
  width: 20px;
  height: 20px;
  border: 1px solid black; 
  border-radius: 50%;
  display: inline-block;
}

<section class="services" id="services">
            <div class="wrapper">
                <div class="content">
                    <div class="sidebar">
                        <h3>Наши услуги</h3>
                        <ul class="sidebar-menu" id="side-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>
                        <div id="sidebar-nav">
                            <span class="business-card circle"></span>
                            <span class="landing circle"></span>
                            <span class="market circle"></span>
                            <span class="corp circle"></span>
                            <span class="bitrix circle"></span>
                            <span class="advertising circle"></span>
                            <span class="seo circle"></span>
                            <span class="promotion circle"></span>
                            <span class="marketing circle"></span>
                        </div>
                    </div>
                </div>
            </div>
        </section>