Добавить активный класс в раздел меню

Question

Я пытаюсь добавить класс «active» в раздел моего меню, если была нажата одна из ссылок в этом разделе. Недавно я узнал, как добавить активный класс (используя jQuery) к ссылке в меню (если он был нажат) и считаю, что я могу настроить этот код, чтобы получить то, что я хочу. Я разместил его ниже, так как это может послужить источником вдохновения.

E.g. Если нажать lil shorty, я хочу, чтобы ul с id = "section_3" получала активный класс. Если затем нажать «Выделить функции», я хочу, чтобы ul с id = «section_2», чтобы получить активный класс (и section_3, чтобы потерять активный класс). Обратите внимание, что на странице «Функции деривации» 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

Я предполагаю, что вы ищете родителю() или ближайший()

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

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

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