Navigation 添加“的最佳方式”；“当前”；轨道3中的导航等级

我在导航菜单中有一些静态页面。我想向当前显示的项目添加一个类似“current”的类

我这样做的方式是添加大量的helper方法（每个方法对应一个项目）来检查控制器和操作

def current_root_class
  'class="current"' if controller_name == "homepage" && action_name == "index" 
end

<ul>
  <li <%= current_root_class %>><%= link_to "Home", root_path %>

def current_root_类
“class=”当前“'如果控制器名称=”主页“&操作名称==”索引”
结束

---

有没有更好的办法呢！？我现在的方式太愚蠢了……

这里不是一个真正的答案，因为我使用的方式和你完全一样。我刚刚定义了用于测试多个控制器或操作的帮助器方法：

在应用程序中\u helper.rb

  def controller?(*controller)
    controller.include?(params[:controller])
  end

  def action?(*action)
    action.include?(params[:action])
  end

def nav_link(*args, &block)
    if block_given?
      options      = args.first || {}
      html_options = args.second
      nav_link(capture(&block), options, html_options)
    else
      name         = args[0]
      options      = args[1] || {}
      html_options = args[2]

      html_options = convert_options_to_data_attributes(options, html_options)
      url = url_for(options)

      class_name = current_page?(url) ? 'active' : nil

      href = html_options['href']
      tag_options = tag_options(html_options)

      href_attr = "href=\"#{ERB::Util.html_escape(url)}\"" unless href
      "<li class=\"#{class_name}\"><a #{href_attr}#{tag_options}>#{ERB::Util.html_escape(name || url)}</a></li>".html_safe
    end
  end

---

然后，您可以在视图或其他助手方法中使用

if controller？（“homepage”）和&action？（“index”，“show”）

。

我使用了一个很棒的gem，名为。

我这样做的方式是在应用程序中添加一个助手函数

def current_class?(test_path)
  return 'current' if request.request_uri == test_path
  ''
end

然后在导航中

<%= link_to 'Home', root_path, :class => current_class?(root_path) %>

当前_类？（根路径）%>

这将根据当前页面uri测试链接路径，并返回当前类或空字符串

我还没有完全测试过它，而且我对RoR非常陌生（在使用PHP十年后才开始使用），所以如果它有一个主要的缺陷，我很乐意听到它

至少这样，每个链接只需要1个helper函数和一个简单调用。

使用helper来确定是否应该分配

“current”

类。例如：

<%= 'active' if current_page?(home_about_path) %>

---

注意：您还可以传递路径（不仅仅是散列选项），例如：

current\u page？（root\u path）

我制作了一个名为

nav\u link

的助手：

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

用法如下：

nav_link 'Home', root_path

nav_link_to 'Home', root_path

这将产生类似HTML的

<li class="current"><a href="/">Home</a></li>

<li class="active"><a href="/">Home</a></li>

当前页面？方法对我来说不够灵活（假设你设置了一个控制器而不是一个操作，那么它只会在控制器的索引操作中返回true），所以我根据其他答案做出了此判断：

  def nav_link_to(link_text, link_path, checks=nil)
    active = false
    if not checks.nil?
      active = true
      checks.each do |check,v|
        if not v.include? params[check]
          active = false
          break
        end
      end
    end

    return content_tag :li, :class => (active ? 'active' : '') do
      link_to link_text, link_path
    end
  end

例如：

nav_link_to "Pages", pages_url, :controller => 'pages'

<%=nav_link("About Us", about_path) %>

我在application_helper.rb（Rails 3）中使用这个nav_link（text，link）函数来完成这项工作，它为我滚动我的引导twitter 2.0导航条链接

def nav_link(text, link)
    recognized = Rails.application.routes.recognize_path(link)
    if recognized[:controller] == params[:controller] && recognized[:action] == params[:action]
        content_tag(:li, :class => "active") do
            link_to( text, link)
        end
    else
        content_tag(:li) do
            link_to( text, link)
        end
    end
end

例如：

nav_link_to "Pages", pages_url, :controller => 'pages'

<%=nav_link("About Us", about_path) %>

---

所有这些都可以使用简单的导航条，但是下拉子菜单呢？ 选择子菜单时，顶部菜单项应设置为“当前”

---

在这种情况下，tabs_on_rails me就是解决方案

是的！查看本文：

将nav_link_helper.rb放入app/helpers，即可轻松操作：

<%= nav_link 'My_Page', 'http://example.com/page' %>

nav_link helper的工作原理与标准的Rails link_to helper类似，但如果满足某些条件，则会将“selected”类添加到链接（或其包装器）中。默认情况下，如果链接的目标url与当前页面的url相同，则会向链接添加默认类别“selected”

这里有一个要点：

---

更新：这现在是一个gem:

我有一个更简洁的nav_link版本，它的工作原理与link_to完全相同，但经过定制可以输出一个包装li标签

将以下内容放入应用程序\u helper.rb中

  def controller?(*controller)
    controller.include?(params[:controller])
  end

  def action?(*action)
    action.include?(params[:action])
  end

def nav_link(*args, &block)
    if block_given?
      options      = args.first || {}
      html_options = args.second
      nav_link(capture(&block), options, html_options)
    else
      name         = args[0]
      options      = args[1] || {}
      html_options = args[2]

      html_options = convert_options_to_data_attributes(options, html_options)
      url = url_for(options)

      class_name = current_page?(url) ? 'active' : nil

      href = html_options['href']
      tag_options = tag_options(html_options)

      href_attr = "href=\"#{ERB::Util.html_escape(url)}\"" unless href
      "<li class=\"#{class_name}\"><a #{href_attr}#{tag_options}>#{ERB::Util.html_escape(name || url)}</a></li>".html_safe
    end
  end

输出：

<ul class="nav nav-list">
  <li class="active">
    <a href="/">
      <i class="icon-home"/>
      Home
    </a>
  </li>
  <li>
    <a href="#">
      <i class="icon-users"/>
      Users
    </a>
  </li>
</ul>

<ul class="nav nav-list">
  <li class="active">
    <a href="/" title="Home">
      <i class="icon-home"/>
      Home
    </a>
  </li>
  <li>
    <a href="#" title="Users">
      <i class="icon-users"/>
      Users
    </a>
  </li>
</ul>

输出：

<ul class="nav nav-list">
  <li class="active">
    <a href="/">
      <i class="icon-home"/>
      Home
    </a>
  </li>
  <li>
    <a href="#">
      <i class="icon-users"/>
      Users
    </a>
  </li>
</ul>

<ul class="nav nav-list">
  <li class="active">
    <a href="/" title="Home">
      <i class="icon-home"/>
      Home
    </a>
  </li>
  <li>
    <a href="#" title="Users">
      <i class="icon-users"/>
      Users
    </a>
  </li>
</ul>

以@Skilldrick的答案为基础

如果您将此代码添加到application.js，它将确保任何包含活动子项的下拉菜单也将标记为活动

$('.active').closest('li.dropdown').addClass('active');

要重述支持代码>添加名为nav_link的助手，请执行以下操作：

def nav_link_to(link_text, link_path)
  class_name = current_page?(link_path) ? 'active' : ''

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

用法如下：

nav_link 'Home', root_path

nav_link_to 'Home', root_path

这将产生类似HTML的

<li class="current"><a href="/">Home</a></li>

<li class="active"><a href="/">Home</a></li>

这是我在当前项目中解决的问题

def class_if_current_page(current_page = {}, *my_class)
    if current_page?(current_page)
      my_class.each do |klass|
        "#{klass} "
      end
    end
  end

然后

li = link_to company_path 
    class: %w{ class_if_current_page( { status: "pending" }, "active" ), "company" } do  
      Current Company

---

我使用这样一个简单的帮助器来创建顶级链接，因此

/stories/my story

页面会突出显示

/stories

链接

def nav_link text, url

  active = (url == request.fullpath || (url != '/' && request.fullpath[0..(url.size-1)] == url))

  "<li#{ active ? " class='selected'" : '' }><a href='#{url}'>#{text}</a></li>".html_safe

end

def导航链接文本，url
活动=（url==request.fullpath | |（url！='/'&&request.fullpath[0..（url.size-1）]==url））
“”.html\u安全
结束

让我展示一下我的解决方案：

\u header.html.erb：

  <ul class="nav">
    <%= nav_tabs(@tabs) %> 
  </ul>

 def nav_tabs(tabs=[])
    html = []
    tabs.each do |tab| 
      html << (content_tag :li, :class => ("current-page" if request.fullpath.split(/[\??]/)[0] == tab[:path]) do
        link_to tab[:path] do
          content_tag(:i, '', :class => tab[:icon]) +
          tag(:br) +
          "#{tab[:name]}"
        end
      end)        
    end

    html.join.html_safe
  end

before_filter :set_navigation_tabs

private
def set_navigation_tabs
  @tabs = 
    if current_user && manager?
      [
        { :name => "Home", :icon => "icon-home", :path => home_index_path },
        { :name => "Portfolio", :icon => "icon-camera", :path => portfolio_home_index_path },
        { :name => "Contact", :icon => "icon-envelope-alt", :path => contact_home_index_path }
      ]
    elsif current_user && client?
      ...
    end

根据，我将其更改为以下内容：

def nav_link(*args, &block)
  is_active = current_page?(args[0]) || current_page?(args[1])
  class_name = is_active ? 'active' : nil

  content_tag(:li, class: class_name) do
    link_to *args, &block
  end
end

---

使它更有用。

我认为最好的方法是

应用程序\u helper.rb:

def is_active(controller, action)       
  params[:action] == action && params[:controller] == controller ? "active" : nil        
end

<li class="<%= is_active('controller', 'action') %>">

和菜单中的：

def is_active(controller, action)       
  params[:action] == action && params[:controller] == controller ? "active" : nil        
end

<li class="<%= is_active('controller', 'action') %>">

我知道这是一个过时的答案，但您可以通过使用一个名为gem的指向帮助器包装器的链接轻松忽略所有这些当前页面检查，它完全符合您的需要，向当前页面链接添加一个活动类

此版本基于@Skilldrick的链接，但允许您添加html内容

因此，您可以：

导航链接“一页”，一页路径

而且：

nav_link a_page_path do
  <strong>A Page</strong>
end

我的简单方法-

application.html.erb

<div class="navbar">
    <div class="<%= @menu1_current %> first-item"><a href="/menu1"> MENU1 </a></div>
    <div class="<%= @menu2_current %>"><a href="/menu2"> MENU2 </a></div>
    <div class="<%= @menu3_current %>"><a href="/menu3"> MENU3 </a></div>
    <div class="<%= @menu4_current %> last-item"><a href="/menu4"> MENU4 </a></div>
</div>

class MainController < ApplicationController
    def menu1
        @menu1_current = "current"
    end

    def menu2
        @menu2_current = "current"
    end

    def menu3
        @menu3_current = "current"
    end

    def menu4
        @menu4_current = "current"
    end
end

---

谢谢。

下面是一个完整的示例，介绍如何在rails视图的引导菜单页面上添加活动类

    <li class="<%= 'active' if current_page?(root_path) %>"><%= link_to 'Home', controller: "welcome" %></li>
    <li class="<%= 'active' if current_page?(about_path) %>"><%= link_to 'About us', about_path %></li>
   <li class="<%= 'active' if current_page?(contact_path) %>"><%= link_to 'Contact us', contact_path %></li>

如果您还希望在视图中支持html选项哈希。例如，如果您想用其他CSS类或id调用它，您可以像这样定义helper函数

def nav_link_to(text, url, options = {})
  options[:class] ||= ""
  options[:class] += " active"
  options[:class].strip!
  link_to text, url, options
end

因此，在视图中，以与调用link_to helper相同的方式调用此helper

<%= nav_link_to "About", about_path, class: "my-css-class" %>

---

就我个人而言，我在这里使用了多种答案的组合

<li class="<%= 'active' if current_page?(inventory_index_path) %>"><a href="#">Menu</a></li>

---

希望它能帮助别人

我想我想出了一个简单的解决方案，可能对很多用例都有帮助。这让我：

• 不仅支持纯文本，而且支持链接到的HTML（例如，在链接内添加图标）
• 只需将几行代码添加到

  application\u helper.rb

• 将

  active

  附加到链接元素的整个类名中，而不是将其作为唯一的类

因此，将其添加到

应用程序\u helper.rb

：

在模板上，您可以有如下内容：

<li class="<%= active('controller_name1,controller_name2', 'index, show')%>">
....
</li>