Question

我有两个wp菜单：

第一个：

<nav id="navigation" role="navigation" class="fir-nav">
    <section class="menus first-menu">
        <h3>Pagrindinis</h3>
        <ul id="main-nav" class="nav">
            <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a href="#apiev">About Tim</a></li>
            <li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5 menulink-active"><a href="#about">Tim</a></li>
            <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#somthhi">Lalallala</a></li>
            <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="#blog">BLog 1</a></li>
        </ul>
    </section><!--/.menus-->
    <a href="#top" class="nav-close"><span>Return to Content</span></a>
</nav>

第二个：

<nav class="sec-nav" id="navigation">
    <section class="menus second-menu">
        <ul id="main-nav" class="nav">
            <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a href="#blog2">Blog 2</a></li>
            <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24 menulink-active"><a href="#galery">Gal</a></li>
            <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#blog">Blog</a></li>
            <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="#reg">Reg</a></li>
            <li id="menu-item-80" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-80"><a href="#contac">Contac</a></li>
        </ul>
    </section><!--/.menus-->                    
</nav>

我已经有了这个剧本：

    jQuery(this).closest('li').addClass('menulink-active').siblings().removeClass('menulink-active');

它为链接提供活动类。但是当我按下第二个菜单的链接时，它不会从第一个菜单中删除链接。我该怎么办？

Answer 1

从所有li元素中删除类，然后将其添加到最后单击的

$('a').click(function() {
    $('li').removeClass('menulink-active');
    $(this).closest('li').addClass('menulink-active');
});

//顺便问一下你有两个id为“navigation”的导航？ ID必须是唯一的，您不能使用相同的ID两次

Answer 2

＆＃13;

 $('li').click(function() {

   $(this).closest('ul').children().removeClass('menulink-active');
   $(this).addClass('menulink-active');


 });

＆＃13;

.menulink-active {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navigation" role="navigation" class="fir-nav">
  <section class="menus first-menu">
    <h3>Pagrindinis</h3>
    <ul id="main-nav" class="nav">
      <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a href="#apiev">About Tim</a>
      </li>
      <li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5 menulink-active"><a href="#about">Tim</a>
      </li>
      <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#somthhi">Lalallala</a>
      </li>
      <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="#blog">BLog 1</a>
      </li>
    </ul>
  </section>
  <!--/.menus-->
  <a href="#top" class="nav-close"><span>Return to Content</span></a>
</nav>




<nav class="sec-nav" id="navigation">
  <section class="menus second-menu">
    <ul id="main-nav" class="nav">
      <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a href="#blog2">Blog 2</a>
      </li>
      <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24 menulink-active"><a href="#galery">Gal</a>
      </li>
      <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#blog">Blog</a>
      </li>
      <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="#reg">Reg</a>
      </li>
      <li id="menu-item-80" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-80"><a href="#contac">Contac</a>
      </li>
    </ul>
  </section>
  <!--/.menus-->
</nav>

＆＃13;

Answer 3

首先删除Active类，然后将其添加到当前单击的li。

$(function(){
  
  $("li").on("click",function(){
     $(this).siblings().removeClass('menulink-active');
     $(this).addClass('menulink-active');
    });
  });

.menulink-active{
  background-color:green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="sec-nav" id="navigation">
    <section class="menus second-menu">
        <ul id="main-nav" class="nav">
            <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a href="#blog2">Blog 2</a></li>
            <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24 menulink-active"><a href="#galery">Gal</a></li>
            <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#blog">Blog</a></li>
            <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="#reg">Reg</a></li>
            <li id="menu-item-80" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-80"><a href="#contac">Contac</a></li>
        </ul>
    </section><!--/.menus-->                    
</nav>

删除活动类的问题

3 个答案: