Как дублировать поведение меню на jquery?

117

07 мая 2021, 20:40

Подскажите как дублировать поведение активного класса? Я создал два меню например левое и правое, пункты одинаковые в обоих меню, левое ссылочное правое булеты, при переключении из любого меню должен атачиться активный класс на тот пункт по которому был сделан клик следовательно в другом меню должен про дублироваться активный класс и на оборот.

<ul class='string-menu'>
   <li class='active'>
      <a class='jsNav' href='#block1'>Пункт 1</a>
   </li>
   <li>
      <a class='jsNav' href='#block2'>Пункт 2</a>
   </li>
</ul>
<ul class='bullet-menu'>
   <li class='active'>
      <a class='jsNav' href='#block1'></a>
   </li>
   <li>
      <a class='jsNav' href='#block2'></a>
   </li>
</ul>
 $(".jsNav").click(function() {
     $('li').removeClass('active');
     $(this).closest('li').addClass('active');
 }

Answer 1

функция index() вернет порядковый номер элемента в списке, а eq(n) получит n-ый элемент списка как jquery объект

 $(".jsNav").click(function() { 
     $('li').removeClass('active'); 
     $(this).closest('li'); 
     var index = $(this).parents("li").index(); 
     $('.string-menu li').eq(index).addClass('active'); 
     $('.bullet-menu li').eq(index).addClass('active'); 
 });

.active a { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<ul class='string-menu'> 
   <li class='active'> 
      <a class='jsNav' href='#block1'>Пункт 1</a> 
   </li> 
   <li> 
      <a class='jsNav' href='#block1'>Пункт 2</a> 
   </li> 
</ul> 
 
<ul class='bullet-menu'> 
   <li class='active'> 
      <a class='jsNav' href='#block1'>sfdsdfsdf</a> 
   </li> 
   <li> 
      <a class='jsNav' href='#block1'>sdfsfsf</a> 
   </li> 
</ul>