Question

我搜索了很多链接，但找不到合适的解决方案，我想在我的网页中突出显示所选列表。我的列表代码是：

%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

和java脚本的代码是：

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

在css中我正在使用它：

li.selected { background-color: #404649;

我的问题是我可以在我的页面中突出显示所选菜单，但当我删除该行时，相应的链接无法正常工作

返回false;

从我的JS代码我的链接正在工作，但现在它没有突出显示链接，我无法找出问题，请建议我如何解决我的问题。谢谢你

Answer 1

这个怎么样？

$( 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

使用return false;取消事件生成的默认行为。此外，javascript更新加载页面上的内容。它不会影响新页面上的行为。

这就是为什么当您使用return false;时，您的链接无效。当您删除return false;时，您的链接不会装饰

相反，尝试在链接页面的javascript中应用这些类。

当活动菜单突出显示时，链接不起作用

2 个答案: