aktiven Menüs und Untermenüs auf einer Navigationsleiste

Question

ich ein Navigationsmenü haben als

folgt

<div id="nav"> 
<ul> 
    <li><a href="<?php echo base_url(); ?>home">HOME</a></li> 
    <li><a href="#">Classes</a> 
     <ul> 
      <li><a href="<?php echo base_url(); ?>class_one">class One</a></li> 
      <li><a href="<?php echo base_url(); ?>class_two">Class Two</a></li> 
      <li><a href="<?php echo base_url(); ?>class_three">Class Three</a></li> 
      <li><a href="<?php echo base_url(); ?>class_four">Class Four</a></li> 
     </ul> 
    </li> 
    <li><a href="<?php echo base_url(); ?>results">Exams</a> 
    </li>  
</ul> 
</div> 
<script> 
$(document).ready(function() { 
    $("[href]").each(function() { 
     if (this.href == window.location.href) { 
      $(this).addClass("active"); 
     } 
    }); 
}); 
</script> 

Neben dem Navigationsmenü Ich habe ein Skript, das die Seite zeigen würde, auf dem der Benutzer durch eine Änderung der Farbe des Menüs ist Verwenden der aktiven Klasse in meiner CSS-Datei. So funktionieren alle Hauptmenüs außer "Klassen" gut, aber was ich will, ist, wenn der Benutzer in einem Untermenü im Menü "Klassen" ist, um "Klassen" als aktives Menü anstelle seiner Untermenüs anzuzeigen. Wie kann das erreicht werden?

Answer 1

$(this).parents('li').find('> a').addClass("active"); 

in der if-Anweisung hinzufügen.

findet Dieser Code alle Eltern des angepassten Element, das li Tags sind, und findet dann die direkten Kinder der angepassten Eltern, die a-Tags sind, und fügt die aktive Klasse, um sie zu