将活动类添加到菜单部分

Question

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

例如如果点击了 lil shorty，我希望 id="section_3" 的 ul 获得活动类。如果然后单击派生函数，我希望具有 id="section_2" 的 ul 获得活动类（并且 section_3 失去活动类）。请注意，在 Deriving functions 页面上，section_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> 

Answer 1

我猜你正在寻找 parent() 或最接近的()

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

https://api.jquery.com/closest/

https://api.jquery.com/parent/