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

Posted 2023-04-13

【中文标题】Rails 4：如何使用 jQuery 为当前页面设置导航样式

【英文标题】：Rails 4: How to style navigation for current page using jQuery

【发布时间】：2016-07-02 13:10:47

【问题描述】：

我已经阅读了很多关于如何突出显示/样式链接以向用户显示他们当前页面的内容。这些解决方案似乎都不起作用。我有一个带有<a href="/foo/"> 等链接的导航栏和一个带有<a href="/foo/bar"> 的下拉菜单，当当前页面为/foo/bar 时，我想为两个链接（/foo/ 和/foo/bar）添加一个类。

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

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

【问题讨论】：

查看this answer 和this blog post。

谢谢，帮了大忙！

唯一的问题是当current_route = Rails.application.routes.recognize_path(path) 时params[:controller] == current_route[:controller] 对于来自同一控制器的链接为真，即使操作不同

【参考方案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>