when active menu is highlighted, links are not working

Question

I searched through many links but could not find a suitable solution, i want to highlight the selected list in my web page. my code for list is:

%div#navg
  %ul.clearfix
    %li
      %a#c-realtime.overview-16{:href => "#", :title => "Summary"} Summary
    %li.menu-trigger
      %a#c-comment.events-24{:href => events_url, :title => "Events"} Events
    %li.menu-trigger
      %a#c-realtime.create-24{:href => new_event_path, :title => "Create new event"} Create new event 
    %li.menu-trigger
      %a#c-realtime.realtime-16{:href => "#", :title => "Analytics"} Analytics
    %li.menu-trigger
      %a#c-realtime.recommend-24{:href => recomendations_url, :title => "Recommendations"} Recommendations

and code for java script is:

:javascript
$( document ).ready( function() {
    $( "#navg ul li a" ).click( function() {
        $( this ).parent( "li" )
            .addClass( "selected" )
            .siblings( ".selected" )
                .removeClass( "selected" );
        return false;
    });
});

and in css i am using this:

li.selected { background-color: #404649; 

my problem is i am able to highlight the selected menu in my page but the respective links are not working, when i remove the line

return false;

from my JS code my links are working but now it is not highlighting the link, I am not able to figure out the problem please suggest me how to solve my problem. Thank u

Answer 1

What about this?

$( document ).ready( function() {
    $( "#navg ul li a" ).click( function(e) {
        e.preventDefault();  //  prevent following the link on the first click
        $( this ).parent( "li" )
            .addClass( "selected" )
            .siblings( ".selected" )
                .removeClass( "selected" );
        window.location.href = $( this ).attr('href');  // manually follow the link
    });
});

Answer 2

using return false; cancels the default behavior of generated by the event. Moreover, javascript updates the contents on the loaded page. it does not affect the behavior on the new page.

that is why when you use return false; your links do not work. and when you remove return false; your links do not decorate

instead, try to apply the classes in the linked page's javascript.