set css active class for current menu

Question

i try to write a function to set current active for menu but my menu has 2 field need

class="current" and class="current selectedLava"

my menu:

<nav>
<ul class="sf-menu">
    <li><a href="Default.aspx">Home</a>
        <ul>
            <li><a href="About.aspx">Home Cinema</a></li>
        </ul>
    </li>
    <li><a href="Home_Movie.aspx">Movie</a>
        <ul>
            <li ><a href="List_Movie.aspx">List Movie</a></li>
            <li ><a href="abc.aspx">List</a></li>
    </li>

</ul><!-- end menu -->

i mean when i visit Home_Movie.aspx, it will be

        <li class="current selectedLava"><a href="Home_Movie.aspx">Movie</a>
        <ul>
            <li><a href="List_Movie.aspx">List Movie</a></li>
            <li ><a href="abc.aspx">List</a></li>
    </li>

and when i visit List_Movie.aspx, it will be

        <li class="current selectedLava"><a href="Home_Movie.aspx">Movie</a>
        <ul>
            <li class="current"><a href="List_Movie.aspx">List Movie</a></li>
            <li ><a href="abc.aspx">List</a></li>
    </li>

easy for you to understand:

1: http://s30.postimg.org/cx4ks87y9/image.png

2: http://s30.postimg.org/p09wfsj0h/image.png

Answer 1

I think you replace your highlightActiveMenuItem method to this:

highlightActiveMenuItem = function () {
    var url = window.location.pathname.substr(6);    
    $('nav li a[href="' + url + '"]').parent().addClass('current');
    if ($('nav li a[href="' + url + '"]').parent().parent().hasClass('sf-menu'))
    {
      $('nav li a[href="' + url + '"]').parent().addClass('selectedLava');
    }
    else
    {
      $('nav li a[href="' + url + '"]').parent().parent().parent().addClass('current selectedLava');  
    }
}

Or use specific class for item of top-level menu to avoid triple parent()