How To Highlight Current Page Link on Left Navigation Menu

Last time, I encountered an issue in SharePoint site where the current page link on the left navigation menu is not being highlighted. And as a workaround, I just created a script using jQuery based on the html structure and css class of the left navigation menu.

Here is the sample script:

<script type="text/javascript" src="/_layouts/1033/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var oUrl = window.location.href;

       

$("table .ms-navitem td a").each(function() {

var ohref = $(this).attr("href");

            if(oUrl.indexOf(ohref) != -1)

            {

                var oClass = $(this).parent().parent().parent().parent().attr("class") + " ms-selectednav";    

                $(this).parent().parent().parent().parent().attr("class", oClass);

            }

});

});

</script>

Basically, in order to explore and understand the html structure of the page, I have used an IE Developer Toolbar as shown below.

After adding the script in the master page, the current page link will now be highlighted.