将活动类添加到菜单部分(Add active class to section of menu)

如果单击该部分中的某个链接，我正在尝试将类“active”添加到菜单的某个部分。 我最近学会了如何将活动类（使用jQuery）添加到菜单中的链接（如果已被点击），并相信我可以调整此代码以获得我想要的内容。 我在下面发布它，因为它可能提供灵感。

例如，如果点击了lil shorty，我想要带有id =“section_3”的ul来获得活动类。 如果单击Deriving函数，我希望带有id =“section_2”的ul获取活动类（而section_3将丢失活动类）。 请注意，在“派生功能”页面上，第2部分还必须具有“活动类”。

任何帮助将不胜感激。

插口

$(function() {
  var pgurl = window.location.href.substr(window.location.href
                    .lastIndexOf("/") + 1);
  $(".section li a").each(function() {
    var aurl = $(this).attr("href").substr($(this).attr("href")
                      .lastIndexOf("/")+1);
    if (aurl == pgurl || aurl == '')
      $(this).addClass("active");
  })
}); 
  
<div class="menu">
<ul class='section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span>
<ul>
<li id='exhibit_1' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a></li>
<li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a></li>
<li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a></li>
</ul>
</li>
</ul>
  
<ul class='section' id='section_3'>
<li><span id='section_title_3' class='section_title'><a href='#' id='section_link_3'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a></li>
<li id='exhibit_104' class='exhibit_title'><a href='#'>lil shorty</a></li>
</ul>
</div>  
  
 
I'm trying to add the class "active" to a section of my menu if one of the links in that section has been clicked. I've recently learnt how to add the active class (using jQuery) to a link in the menu (if it's been clicked) and believe I can tweak this code to get what I want. I've posted it below since it might provide inspiration.
 
E.g. If lil shorty has been clicked, I want the ul with id="section_3" to get the active class. If Deriving functions is then clicked, I want the ul with id="section_2" to get the active class (and section_3 to lose the active class). Note, on the Deriving functions page, section_2 must also have the "active class".
 
Any help would be greatly appreciated.
 
Jack
 
 
 
  
  
$(function() {
  var pgurl = window.location.href.substr(window.location.href
                    .lastIndexOf("/") + 1);
  $(".section li a").each(function() {
    var aurl = $(this).attr("href").substr($(this).attr("href")
                      .lastIndexOf("/")+1);
    if (aurl == pgurl || aurl == '')
      $(this).addClass("active");
  })
}); 
  
<div class="menu">
<ul class='section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span>
<ul>
<li id='exhibit_1' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a></li>
<li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a></li>
<li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a></li>
</ul>
</li>
</ul>
  
<ul class='section' id='section_3'>
<li><span id='section_title_3' class='section_title'><a href='#' id='section_link_3'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a></li>
<li id='exhibit_104' class='exhibit_title'><a href='#'>lil shorty</a></li>
</ul>
</div>  
  
 

                
最满意答案
                
                    
                        
 我想你正在寻找父（）或最近（） 
 
$('li').click(function() {
    $('.section').removeClass('active');
    $(this).closest('.section').addClass('active');
});
 
 https://api.jquery.com/closest/ 
 
 https://api.jquery.com/parent/ 
I guess you're looking for parent() or closest()
 
$('li').click(function() {
    $('.section').removeClass('active');
    $(this).closest('.section').addClass('active');
});
 
https://api.jquery.com/closest/
 
https://api.jquery.com/parent/