jQuery添加活动类链接在主菜单上点击子菜单

我试图添加一个活动的类到子菜单（subnav）项目，当主导航中的项目被点击。当主菜单项被点击时，目标是突出显示子菜单项目。子菜单项是链接到一个网页的部分：jQuery添加活动类链接在主菜单上点击子菜单

<div id="subnav"> 
    <ul> 
    <li><a href="#adaptivetech">Adaptive Technology</a></li> 
    <li><a href="#iepspecialed">IEP and Special Ed Forms</a></li> 
    <li><a href="#behaviorplanning">Behavior Planning Forms</a></li> 
    <li><a href="#npsnpainfo">NPS/NPA Information and Forms</a></li> 
    <li><a href="#privateschoolref">Private School Referral for Assessment</a></li> 
    <li><a href="#programtransfer">Program Transfer</a></li> 
    </ul> 
</div>

这里是主菜单的样子：

<ul class="sf-menu"> 
    <li><a href="newselpasite3.html">Home</a></li> 
    <li><a href="#">Meetings/Workshops</a> 
    <ul> 
    <li><a href="#">Selpa Workshops</a></li> 
     <li><a href="#">Selpa Committee Meeting for 2012-2013</a></li> 
     <li><a href="#">Archived Agendas and Minutes</a></li> 
       </ul></li> 
    <li><a href="#" class="top_parent">Services</a> 
    <ul> 
    <li><a href="#">Adaptive Technology Center</a></li> 
     <li><a href="#">Alternative Dispute Resolution</a></li> 
     <li><a href="#">Autism Support</a></li> 
      <li><a href="#">BEST Schoolwide Positive Behavior Support</a></li> 
      <li><a href="#">Community Advisory Committee</a></li> 
       <li><a href="#">Early Start Infant Program</a></li> 
       </ul> 
    </li> 
    <li><a href="#" class="active">Forms</a> 
    <ul> 
     <li><a href="#adaptivetech">Adaptive Technology</a></li> 
     <li><a href="#iepspecialed">All IEP and Special Education Forms</a></li> 
     <li><a href="#behaviorplanning">Behavior Planning Forms</a></li> 
     <li><a href="#npsnpainfo">NPS/NPA Information and Forms</a></li> 
     <li><a href="#privateschoolref">Private School Referral for Assessment</a></li> 
     <li><a href="#programtransfer">Program Transfer</a></li> 
    </ul></li>

感谢。

来源

2013-02-22 Bob Herbstman

你有什么困难呢？无法定期'点击'事件处理解决这个问题？ – 2013-02-22 17:32:18

看起来像你的标记是缺少结束主菜单ul标记 – 2013-02-22 17:32:36

对不起，我截断了列表，并意外删除了结束ul标记 – 2013-02-22 17:39:28

可能是这样的：fiddle

$('ul li ul').find('li a').click(function(){ 
    var $this = $(this); 
    $('a').removeClass('active'); 
    $this.addClass('active'); 
});

来源

2013-02-22 17:35:05 Jai

这似乎突出显示了主菜单中的列表项，而不是subnav菜单中的相应项目。 – 2013-02-22 17:42:26

刚更新了答案。 – Jai 2013-02-22 17:52:29

似乎要回顾的是，我需要一种方法来选择subnav菜单中的href元素，它与顶层菜单中单击的href元素相匹配 – 2013-02-22 18:14:32

尝试以下。

$('li').each(function(){ 
    if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1) 
    { 
    $(this).addClass('active').siblings().removeClass('active'); 
    } 
});

来源

2013-11-14 08:41:23 Hardik

jQuery添加活动类链接在主菜单上点击子菜单

回答

相关问题