Highlighting Menu Using jQuery - Does Not Work on POST

Question

I'm having an issue regarding some jQuery I am using to highlight a menu item that has been selected by a user.

Here is my code (within the Site.Master):

<script type="text/javascript">
    $(function () {
        $('#horizontalmenu ul li a').live('click', function () {
            $('#horizontalmenu ul li').removeClass('current');
            $(this).closest('li').addClass('current');
        });
    });
</script>

This works when I trace through with Firebug, but the class is changed and then the page reloads and I lose the class change. What am I doing wrong here?

Answer 1

Does your page require a reload? If not, in your event handler pass in an event object and call stopPropagation() so it does not reload the page.

<script type="text/javascript">
    $(function () {
        $('#horizontalmenu ul li a').live('click', function (event) {
            $('#horizontalmenu ul li').removeClass('current');
            $(this).closest('li').addClass('current');
            event.stopPropagation();
        });
    });
</script>

Answer 2

I think when you reload the page, document is reloaded and you lost all your last change. I you want to highlight the menu item, you should use cookie to save the current menu item index. But i have another code using in my website :

$(".menu li a").each(function() {
$(this).removeClass();
if (document.location.href.indexOf($(this).attr("href")) > 0)
{
    $(this).addClass("menuactive");
} 
});