Rails：为导航设置默认的“当前”css类？

Posted 2023-04-13

【中文标题】Rails：为导航设置默认的“当前”css类？

【英文标题】：Rails: set default 'current' css class for navigation?

【发布时间】：2015-02-28 04:34:06

【问题描述】：

使用这里的解决方案后出现问题 Best way to add "current" class to nav in Rails 3

def nav_link(link_text, link_path)
  class_name = current_page?(link_path) ? 'current' : ''
  content_tag(:li, :class => class_name) do
    link_to link_text, link_path
  end
end

例如，我有localhost/action1 和localhost/action2，每个都有一个导航按钮。 当用户在任一页面时，它都很好用。在这种情况下，其中一个按钮将具有“当前”css 类。

但是，如果我将root_path 设置为其中之一，假设是/action1，那么当用户访问localhost 时，action1 的按钮将没有current 类

如何解决在设置为root_path 时添加缺少的current css 类？

【问题讨论】：

嗯，为什么这么难比较？也许将 request.path 与链接路径进行比较会更容易（如果您使用内置方法获取链接路径）？

【参考方案1】：

您可以查询路由器本身，为您提供当前路径的controller 和action，并将其与params 中的当前值进行比较。

def nav_link(text, path)
  recognized = Rails.application.routes.recognize_path(path)

  klass = "current" if recognized[:controller] == params[:controller] &&
    recognized[:action] == params[:action]

  content_tag(:li, class: klass) do
    link_to(text, path)
  end
end

【讨论】：

是否可以识别像localhost/posts?number=7 这样的查询。可能是recognized[:number]?

@cqcn1991 localhost/posts?number=7 和 localhost/posts 就路由器而言是相同的。如果您想考虑查询参数，您需要自己获取并打开它们（request.query_parameters 为您提供"number"=>"7"）。

【参考方案2】：

您可能希望通过以下方式突出显示您的导航菜单 - 我很确定无论设置根路径，这都有效：

<ul>
  <li class="<%= "current" if params[:controller] == "home" %>">Home</li>
  <li class="<%= "current" if params[:controller] == "action1" %>">Action 1</li>
  <li class="<%= "current" if params[:controller] == "action2" %>">Action 2</li>
</ul>

你可能希望替换

params[:controller]

与

params[:action] 

取决于您要突出显示的级别。我在最近的一个项目中使用了这个设置，它对我有用。祝你好运！