javascript - rails 4 : How to style navigation for current page using jQuery

Question

我读了很多关于如何突出显示/设置链接样式以向用户显示当前页面的内容。这些解决方案似乎都不起作用。我有一个导航栏，其中包含诸如 <a href="/foo/"> 之类的链接和一个下拉菜单 <a href="/foo/bar">当当前页面为/foo/bar时我想向两个链接添加一个类( /foo/ 和 /foo/bar )。

我已尝试使用 CSS-Tricks 上的解决方案并尝试编写自己的 jQuery，但无法选择全部正确的 DOM 元素。

是否有更好的 jQuery 解决方案或在服务器端执行此操作的方法？

Answer 1

基本上，您想要检查当前的 Controller 和操作是否是链接的 Controller 和操作。

好的，这是一些示例代码:

application.css(为了便于查看...使用您自己的):

a.myLink {
   color: blue;
   background: white;
   size: 24px;
}

a.active {
  background: green;
  color: pink;
}

在你的帮助程序脚本中(我把我的放在application_helper中):

module ApplicationHelper
  def active_link?(controller, *action)
    controller.include?(controller_name) && action.include?(action_name)
  end
end

在你的布局页面(我的是views/layouts/application.html):

<%= controller_name %>
<%= action_name %>
  <br>

  <%= link_to "list articles", articles_path, class:"myLink #{active_link?('articles', 'index') ? 'active' : '' }" %>
  <%= link_to "new article", new_article_path, class:"myLink #{active_link?('articles', 'new') ? 'active' : '' }"  %>
  <br>
  <%= link_to "list posts", posts_path,  class:"myLink #{active_link?('posts', 'index') ? 'active' : '' }"  %>
  <%= link_to "new post", new_post_path,  class:"myLink #{active_link?('posts', 'new') ? 'active' : '' }"  %>

  <%= yield %>

</body>