Set active menu item

I have a menu and I need to highlight the menu item that loaded the current page. I tried to set server-side the id of the body to something unique and pertaining to the current page being loaded. Surprisingly, I could not get the page file name (or some other unique Id) but only the page title which wasn’t good enough.

The HTML (in a Master page):

<div id="menu">
        <li id="regions">
            <asp:HyperLink ID="hlRegions" runat="server" CssClass="menu-item"
        <li id="municipalities">
            <asp:HyperLink ID="hlMunicipalities" runat="server" CssClass="menu-item"

The Javascript:

<script type="text/javascript" >
        function getPageName()
            var loc = document.location.href;
            return loc.substring(loc.lastIndexOf('/') + 1, loc.indexOf('.')).toLowerCase();
            var pageName = getPageName();
            log("pageName:", this, pageName);

            $('#menu li').removeClass("selected-menu");
            $('#menu ul #' + pageName).addClass("selected-menu");

Each time the page loads, the “selected-menu” class is removed from all li items under #menu. Then, the “selected-menu” class is added to the li item that has the id equal to the page being loaded.