1

我必须在这里遗漏一些东西，因为我认为这会起作用。我有一个导航栏，点击链接后，您可以通过网站导航到，很简单。所以当我点击一个锚标签时，我希望那个 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');
});

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

任何指针表示赞赏

4

3 回答 3

7

当点击链接时，页面正在改变，这意味着所有的 HTML 都被重新加载——在你注意到它们之前清除所有添加的 CSS 类。你最好使用服务器端脚本来确定哪个页面是活动的，并发送带有活动类的 HTML 已经在 li

于 2013-07-19T10:32:26.617 回答
1

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

于 2013-07-19T10:34:20.717 回答
0 
jQuery('a').click(function () {
    jQuery(this).parent().addClass('current-menu-item');
});

jsFiddle

于 2013-07-19T10:37:56.447 回答