如何使当您单击其中一个菜单项时，另一个更改颜色？

Question

当您单击 .sidebar-menu 中的一个 li 时，如何通过添加 .actived 类使 .sidebar-nav 中的一个 li 圆圈的背景颜色变为白色？此外，当单击 .sidebar-menu 中的一个 li 时，.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

您可以使用被点击的 li 的index()，然后在您的sidebar-nav ul 中使用addClass 到相同的li。

演示代码：

$('.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>

Answer 2

在sidebar-menu ul 元素上添加click 事件监听器并捕获点击的li 元素的索引，然后获取相同索引的circle 元素并在其上添加active 类并从其中删除active 类上一个突出显示的元素。

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>

Answer 3

在按钮的单击功能上，尝试添加一行，为与当前项目相关的父菜单元素设置类或属性。这样就可以根据当前菜单项对整个菜单应用不同的样式。