seo Question posted in
Some basic information to get you started with this can be found here.

How to make it so that when you click on one of the menu items, the other changes color? – SEO

How to make one of the li circles in .sidebar-nav change the background color to white when you click on one of the li in the .sidebar-menu, by adding the .actived class to it? Moreover, when one of the li in the .sidebar-menu is clicked, the circle from the .sidebar-nav should change color in accordance with the element that was clicked. For example, they clicked on the "Business card site" and the first circle lights up, clicked on the "Internet store" and the third circle lights up.

Site ct03638.tmweb.ru

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

enter image description here

Tags:

3

Answers


  1. 0

    On the click function of your button, try adding a line that sets a class or an attribute to the parent menu element related to this current item. This way you can apply different styles according to the current menu item to the whole menu.

    Login or Signup to reply.
  2. 0

    You can use index() of the li which is clicked then using that addClass to same li in your sidebar-nav ul.

    Demo Code :

    $('.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>
    Login or Signup to reply.
  3. 0

    Add click event listener on sidebar-menu ul element and capture the index of clicked li element, then get the circle element of same index and add active class on it and remove the active class from previous highlighted element.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search