jQuery在单击时从主菜单添加活动类以链接到子菜单答案

【问题标题】：jQuery add active class to link in submenu from main menu on clickjQuery在单击时从主菜单添加活动类以链接到子菜单
【发布时间】：2015-02-11 23:06:26
【问题描述】：

我正在尝试将活动类添加到子菜单（子导航）项时在主导航中单击。目标是突出显示子菜单项单击主菜单项。子菜单项是指向页面部分的链接：

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

谢谢。

【问题讨论】：

您对此有什么困难？常规的“点击”事件处理不能解决这个问题吗？
看起来您的标记缺少结束主菜单 ul 标记
抱歉，我截断了列表，不小心把结束的 ul 标记掉了
如果每个部分都是单独的页面，我只需手动将活动类添加到相应的页面。因为它们都在同一个页面上，所以我需要一种动态添加类的方法。我对 jQuery/Javascript 的经验非常有限

标签： jquery

【解决方案1】：

可能是这样的：fiddle

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

【讨论】：

当我单击它时，这似乎突出显示了主菜单中的列表项，而不是子导航菜单中的相应项。
似乎归结为我需要一种方法来在子导航菜单中选择与在顶级菜单中单击的 href 元素相匹配的 href 元素
嗨 Jai- 感谢您的回答，但您的代码似乎将活动类添加到单击的项目中。当单击第一个列表中的项目时，我实际上希望将活动类添加到第二个列表中的项目中。两个列表中的项目具有匹配的 href。
你能用这样的东西来获取主菜单列表项的 href 字符串吗： var urlString = ("ul.sf-menu li li a").get(window.location.pathname) ;

【解决方案2】：

尝试关注。

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

【讨论】：