主页 / 问题 / 1009115
Accepted
Anton Essential
Asked:2020-08-01 22:31:12 +0800 CST2020-08-01 22:31:12 +0800 CST

如何在 jquery 中复制菜单行为？

  • 772

告诉我如何复制活动类的行为？我创建了两个菜单，例如左和右，两个菜单中的项目相同，左参考右项目符号，当从任何菜单切换时，活动类应该攻击点击的项目，因此，在另一个菜单中，活动类应该被复制，反之亦然。

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

1 个回答

  1. Best Answer

    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>

    • 2

相关问题