Question

我尝试编写一个函数来为菜单设置当前活动但我的菜单有2个字段需要

class =“current”和class =“current selectedLava”

我的菜单：

<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 -->

我的意思是当我访问Home_Movie.aspx时，它将是

        <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>

当我访问List_Movie.aspx时，它将是

        <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>

很容易理解：

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

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

Answer 1

我认为你将highlightActiveMenuItem方法替换为：

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');  
    }
}

或者使用顶级菜单项的特定课程来避免三重parent()

为当前菜单设置css活动类

1 个答案: