Question

我在母版页内（在ASP.NET网站中）有一个菜单，我想在主页菜单中突出显示活动页面而不是子菜单。

HTML：

<ul id="nav" class="sf-menu">
<li class="current-menu-item"><a href="index.html">Home</a></li>    
<li><a href="page.html">menu-2</a>
   <ul>
      <li><a href="page-full.html">full</a></li>
      <li><a href="page-features.html">featurs</a></li>
      <li><a href="page-typography.html">typography</a></li>
   </ul>
</li>
</ul>

Answer 1

使用此Javascript

 function LoadActiveMenu()
    {
        var str=location.href.toLowerCase();
        $("#nav li a").each(function() {
            if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
                $("li.current-menu-item").removeClass("current-menu-item");
                $(this).parent().addClass("current-menu-item");
            }
        });
        $("li.current-menu-item").parents().each(function(){
            if ($(this).is("li")){
                $(this).addClass("current-menu-item");
            }
        });
     }

并在下面的事件中调用此函数

<body onload="LoadActiveMenu();">
</body>

Answer 2

我没有给你完美的解决方案，但这样会帮助你

var pathname = window.location.pathname;
    var queryStr = window.location.search;
    var leftStr = "/" + pathname.split('/')[pathname.split('/').length - 1];
    var leftStr2 = "/" + pathname.split('/')[pathname.split('/').length - 2];
    $('.nav   ul  li  a').each(function () {
        var href = $(this).attr('href');

        if (href != undefined) {
            var urlLink = "/" + href.split('/')[href.split('/').length - 1];
            if (leftStr == urlLink) {
                $(this).parent().addClass('active');
                $(this).parent().find('ul').show();
                $(this).parent().parent('ul').show();
            }
            else if (leftStr2 == urlLink) {
                $(this).parent().addClass('active');
                $(this).parent().find('ul').show();
                $(this).parent().parent('ul').show();
            }
        }
    });

这是一个示例代码，您可以参考给定的代码，如果有什么不可理解的请告诉我，我会解释更多

如何在主页面菜单中突出显示活动页面而不是子菜单？

2 个答案: