根据 URL 参数在 Rails 中设置 <li> 活动类

Posted 2023-04-13

【中文标题】根据 URL 参数在 Rails 中设置 <li> 活动类

【英文标题】：Set <li> active class in Rails based on URL param

【发布时间】：2012-12-29 02:44:20

【问题描述】：

我有一个这样的导航：

<nav>
  <ul class='nav nav-pills'>
    <li>
      <%= link_to 'link1', '#' %>
    </li>
    <li>
      <%= link_to 'link1', '#' %>
    </li>
  </ul>
</nav>

我的路由、视图和控制器设置为 root_url/.../action 和 root_url/.../action/:page_id 都将呈现相同的视图，实例变量 @page 基于 :page_id 参数设置或为指定的默认值动作的根源。稍后在视图中，我正在渲染与 @page 的名称匹配的部分。

我要做的是在链接文本与@page 的值匹配的<li> 上设置class='active'。

我最初的想法是保持 DRY 并设置 window.page_id 以匹配 @page 并使用 CoffeeScript 添加类，但这给了我在页面加载和设置类之间非常明显的延迟。

有谁知道实现这一目标的最佳方法？现在我将嵌入的 ruby​​ 放入每个 <li> 元素中，这是相当不可取的。

【问题讨论】：

Best way to add "current" class to nav in Rails 3 的可能重复项

【参考方案1】：

从另一个 S.O. 借用并稍作修改以适应您的需求。发帖Best way to add "current" class to nav in Rails 3

def nav_link(link_text, page)
  class_name = link_text == page ? 'active' : ''

  content_tag(:li, :class => class_name) do
    link_to link_text, page
  end
end

类似：

nav_link 'Home', @page

【讨论】：

我认为我们在使用助手的情况下走在正确的轨道上，但不幸的是，如果没有 params[:page_id]，这不适用于根操作案例

只需根据您的需要进行修改。然后传递@page，并将其与链接文本进行比较。我修改了答案。

提交了我的修改作为答案。感谢您的帮助！

【参考方案2】：

扩展 Zeiv 的答案，您可以只比较网址：

辅助方法：

def nav_link(link_text, link_path)
  content_tag(:li, class: ('active' if link_path == url_for(only_path: true)) ) do
    link_to link_text, link_path
  end
end

现在在视图中你可以这样做：

<%= nav_link "Some Page", some_page_path %>

【参考方案3】：

扩展 99miles 的答案，我把它放在相应的助手中：

def nav_link(link_text, link_path, current_page)
  content_tag(:li, class: ('active' if link_text.downcase.gsub(' ', '_') == current_page) ) do
    link_to link_text, link_path
  end
end

这样<li> 不活动的元素没有空类，即使链接文本包含空格也可以工作。

在视图中使用如下：

<%= nav_link "My Page", page_path('my_page'), @page %>

编辑：

或者，如果您想独立于 :page_id 指定链接的文本

def nav_link(link_text, link_path, page_id, current_page)
  content_tag(:li, class: ('active' if page_id == current_page) ) do
    link_to link_text, link_path
  end
end 

那你就可以了

<%= nav_link "My Link", page_path('my_page'), 'my_page', @page %>