突出显示活动菜单选择答案

【问题标题】：Highlight active menu selection突出显示活动菜单选择
【发布时间】：2014-01-28 21:39:42
【问题描述】：

使用此处提供的解决方案How to highlight active page in a masterpage menu? 我能够让我的活动菜单项正确显示在导航菜单上。我正在使用带有母版页的 VB.NET。以下代码位于母版页中：

<script>
       function equalHeight(group) {
           tallest = 0;
           group.each(function () {
               thisHeight = $(this).height();
               if (thisHeight > tallest) {
                   tallest = thisHeight;
               }
           });
           group.each(function () { $(this).height(tallest); });
       }

       jQuery(document).ready(function () {
           App.init();
           // Call to set active menu selecttion
           var str = location.href.toLowerCase();
           $(".nav li a").each(function () {
               if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
                   $("li.active").removeClass("active");
                   $(this).parent().addClass("active");
               }
           });
           equalHeight($(".img-thumbnail"));

       });
</script>

添加：如果一个部分（例如“工具”）有多个属于它的页面，你能想到任何方法让上面的代码选择正确的活动菜单项吗？

【问题讨论】：

标签： jquery css vb.net twitter-bootstrap

【解决方案1】：

使用这个 Javascript

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

并在身体负载事件上调用此函数，如下所示

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

【讨论】：