cuando el menú activo está resaltado, los enlaces no funcionan

Busqué en muchos enlaces pero no pude encontrar una solución adecuada, quiero resaltar la lista seleccionada en mi página web. mi código para la lista es:

%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

y el código para java script es:

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

y en css estoy usando esto:

li.selected { background-color: #404649; 

mi problema es que puedo resaltar el menú seleccionado en mi página pero los enlaces respectivos no funcionan, cuando elimino la línea

falso retorno;

desde mi código JS, mis enlaces funcionan, pero ahora no está resaltando el enlace, no puedo resolver el problema, sugiérame cómo resolver mi problema. Gracias

preguntado el 03 de mayo de 12 a las 07:05

2 Respuestas

usar return false; cancela el comportamiento predeterminado de generado por el evento. Además, javascript actualiza el contenido de la página cargada. no afecta el comportamiento en la nueva página.

por eso cuando usas return false; tus enlaces no funcionan. y cuando te quitas return false; tus enlaces no decoran

en su lugar, intente aplicar las clases en el javascript de la página vinculada.

contestado el 03 de mayo de 12 a las 08:05

¿Qué hay de esto?

$( 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
    });
});

contestado el 03 de mayo de 12 a las 09:05

Sigo teniendo el mismo problema al usar este código. Mis enlaces funcionan como antes, pero no están decorados. Este código funciona igual que cuando elimino return false; ¿Puedes decirme una forma más elaborada? Gracias.. - DSH

¿Qué hay de usar el selector activo css? w3schools.com/cssref/sel_active.asp - Dans

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.