Highlight active menu selection

Question

Using the solution provided here How to highlight active page in a masterpage menu? I was able to get my active menu items to show correctly on the navigation menu. I am using VB.NET with a masterpage. The following code resides in the masterpage:

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

ADDED: If a section ("Tools" for instance) has multiple pages that belong under it, can you think of any way to have the above code select the correct active menu item?

score 0 · Answer 1 · answered Dec 08 '14 at 10:37

Use this 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");
            }
        });
     }

and call this function on body load event like below

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

Highlight active menu selection

1 Answers1