Question

我一直在阅读很多关于如何突出显示/样式链接以向用户显示当前页面的内容。这些解决方案似乎都不起作用。我有一个导航栏，其中包含<a href="/foo/">和<a href="/foo/bar">下拉列表等链接，当前页面为/foo/bar时，我想为两个链接添加一个类（/foo/和{ {1}}）。

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

是否有更好的jQuery解决方案或服务器端的方法？

Answer 1

基本上，您要检查当前的控制器和操作是否是链接。

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

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>

Rails 4：如何使用jQuery为当前页面设置样式

1 个答案: