There are two lists. When you click on one of the items in one list, it is assigned a class, while others are deleted.

How to make that in the next list, at the corresponding element this class too was attached and deleted. That is, if in the first list the (third for example) element has the class .active , then it appeared in the other at the same element. It is desirable that the test goes in both directions.

Below I wrote an example of a small code, but I have not yet understood how to connect ...

 $(".sliderone li").click(function() { $(".sliderone li").removeClass("active"); $(this).addClass("active"); if($(".sliderone li:eq("+el+")").hasClass('active')){ $(".muther .child:eq("+el+")").addClass('active') } }) 
 li.active, .child.active { background: #95FFCC; padding: 5px; border: 2px solid #2C9A00; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class="sliderone"> <li>1</li> <li class="active">2</li> <li>3</li> </ul> <div class="nextclock"> <div class="muther"> <div class="child">11</div> <div class="child">22</div> <div class="child">33</div> </div> </div>

Please note that one of the elements already has this class, that is, checking for the presence of a class should work not by clicking, but immediately, regardless of whether they clicked or not. Do not scold for errors, just try not know yet how.

  • why not just use any tab component? :-) - Grundy
  • I do not understand what you mean. I only know that there is an html code with two independent lists that I want to link - Evgeny Shevtsov
  • looks like a tab, when there is a list, on click of elements of which the corresponding content is shown - Grundy
  • I do not need any content or tab, I just have two blocks in one list of elements, and in the other there are blocks associated with each element. These two main blocks are displayed in different parts of the page (generally in different) One in the header of the other somewhere below the right. It is necessary that when one of the elements above has a class active, then in the block below the corresponding element this class was, for example, they are highlighted the same, so that it can be seen that this block refers to this list item and this one to this. - Yevgeny Shevtsov
  • Aha :-) that's exactly what the tabs described :-) you can still call this navbar :-) for example, ready-made getbootstrap.com/components/#nav - Grundy

1 answer 1

If the correspondence is in the order number, then the index function can be used.

 $(".sliderone li").click(function() { $(".sliderone .active,.muther .active").removeClass("active"); $(".muther .child:eq(" + $(this).addClass("active").index() + ")").addClass('active') }); $(".muther .child:eq(" + $(".sliderone .active").index() + ")").addClass('active') 
 li.active, .child.active { background: #95FFCC; padding: 5px; border: 2px solid #2C9A00; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class="sliderone"> <li>1</li> <li class="active">2</li> <li>3</li> </ul> <div class="nextclock"> <div class="muther"> <div class="child">11</div> <div class="child">22</div> <div class="child">33</div> </div> </div>

  • Look, I formulated the question, I don’t know how close the solution is, but for some reason, when you click on the third element, everything works. stackoverflow.com/questions/498684/… - Evgeny Shevtsov
  • Your answer will also be important but will be implemented on another page. but how to implement class verification as soon as it changes in the first list is not clear - Evgeny Shevtsov
  • @ YevgenyShevtsov, I honestly do not understand the difference between these questions - Grundy
  • I don’t know how to chat with you again to explain this moment to the explanation, why I thought that it would work - Evgeny Shevtsov
  • @ YevgenyShevtsov, go to it by reference to the question - Grundy