問題與刪除活動類

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

首先刪除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>

Answer 2

刪除類所有li元素，然後將它添加到最後點擊

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

//順便說一句，你有兩個資產淨值ID爲「導航」？ ID必須是唯一的，你不能用相同的ID兩次

Answer 3

$('li').click(function() { 
 

 
    $(this).closest('ul').children().removeClass('menulink-active'); 
 
    $(this).addClass('menulink-active'); 
 

 

 
});

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

<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>