javascript - 单击时将类添加到 li

Question

我一定是在这里遗漏了一些东西，因为我认为这会起作用。我有一个导航栏，单击链接后您可以导航到该站点，非常简单。所以当我单击 anchor 标记时，我希望 li为其分配了一个类名，基本上是为链接添加一些样式，以便用户可以识别他们在哪个页面上

导航栏

 <ul id="main-menu" class="clearfix">
    <li>
      <%= link_to '<i class="icon-home"></i> Home'.html_safe, root_path %>
    </li>

    <li>
      <%= link_to '<i class="icon-desktop"></i> About Me'.html_safe, pages_aboutme_path %>
   </li>

    <li>
      <%= link_to '<i class="icon-picture"></i>  Portfolio'.html_safe, pages_portfolio_path %>
    </li>

    <li>
      <%= link_to '<i class="icon-comments"></i> Blog'.html_safe, blog_path %>
    </li>

    <li>
      <%= link_to '<i class="icon-envelope"></i> Contact'.html_safe, contact_path %>
    </li>
  </ul>

我的 jquery 尝试

$('#main-menu > li > a').click(function() {
  $(this).parent('li').addClass('current-menu-item');
});

我是否正确地认为是新页面的呈现导致了这里的问题？

感谢任何指点

Answer 1

单击链接时，页面会发生变化，这意味着所有 HTML 都会重新加载 - 在您甚至没有注意到它们之前清除所有添加的 CSS 类。您最好使用服务器端脚本来确定哪个页面处于事件状态，并发送 li 上已有事件类的 HTML