0

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

<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');
 }

1 ответ 1

2

функция 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>

3
  • О блин, оказывается все так просто. Понял спс. 2 авг 2019 в 9:27
  • Может вы знаете как еще событие скролл прикрутить, напрмер, если я докрутил до #block2 что бы классы в меню сменились на втрой пункт например. Это я для лендинга кручу не хочется плагины использовать. 2 авг 2019 в 10:38
  • так задайте вопрос, я думаю, вам сразу и подскажут
    – splash58
    2 авг 2019 в 11:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.