Aktive Klasse zum Abschnitt des Menüs hinzufügen

Question

Ich versuche, die Klasse "aktiv" zu einem Abschnitt meines Menüs hinzuzufügen, wenn auf einen der Links in diesem Abschnitt geklickt wurde. Ich habe kürzlich gelernt, wie man die aktive Klasse (mit jQuery) zu einem Link im Menü hinzufügt (wenn es angeklickt wurde) und glaube, dass ich diesen Code optimieren kann, um zu bekommen, was ich will. Ich habe es unten gepostet, da es Inspiration liefern könnte.

z. Wenn auf lil shorty geklickt wurde, möchte ich die ul mit id = "section_3", um die aktive Klasse zu erhalten. Wenn auf Ableiten von Funktionen geklickt wird, möchte ich die ul mit id = "section_2", um die aktive Klasse zu erhalten (und section_3, um die aktive Klasse zu verlieren). Beachten Sie, dass section_2 auf der Seite Ableiten von Funktionen auch die "aktive Klasse" haben muss.

Jede Hilfe würde sehr geschätzt werden.

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>

Answer 1

Ich glaube, Sie suchen parent() oder am nächsten()

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

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

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