1

我有这样的导航：

<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.

我要做的是class='active'在<li>其链接文本与@page.

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

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

4

3 回答 3

4

从另一个 SO 帖子借用并稍作修改以满足您的需求在 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
于 2013-01-15T02:51:43.500 回答
1

扩展 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 %>
于 2014-02-22T05:17:55.080 回答
0

扩展 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 %>
于 2013-01-15T03:28:56.910 回答