Question

我必须在这里遗漏一些东西，因为我认为这会起作用。我有一个导航栏，点击链接你导航到整个网站，很简单..所以，当我点击一个锚标签，我希望那个李到有一个分配给它的类名，基本上添加了一些样式链接，以便用户可以识别他们在哪个页面

导航栏

 <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类。您最好使用服务器端脚本来确定哪个页面处于活动状态并发送带有活动类的HTML

Answer 2

是的，当您不阻止链接的默认操作并且点击导航离开当前页面时，添加的类将在新加载的页面上丢失。

Answer 3

jQuery('a').click(function () {
    jQuery(this).parent().addClass('current-menu-item');
});

jsFiddle

点击即可向li添加类

3 个答案: