Question

我有这样的导航：

<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都呈现相同的视图，并根据{{1}设置实例变量@page参数或操作根的指定默认值。在视图的后面，我正在渲染与:page_id的名称匹配的部分。

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

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

有谁知道实现这一目标的最佳方法？现在我在每个@page元素中加入嵌入的ruby，这是不可取的。

Answer 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

Answer 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 %>

Answer 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 %>

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

3 个答案: