Best way to highlight current page in Rails 3? — a

问题:

For the following code:

<%= link_to "Some Page", some_path %>

How do I apply a css class current using the current_page?‎ helper method?

Or if some other better way is available?

回答1:

In app/helpers/application_helper.rb

def cp(path)
  "current" if current_page?(path)
end

In your views:

<%= link_to "All Posts", posts_path, class: cp(posts_path) %>

Basically write a simple wrapper around it. Additionally you could extend the method to allow additional classes to be applied by adding arguments. Keeps the views concise/dry. Or, without extending the method, you could just do simple String interpolation like so to add additional classes:

<%= link_to "All Posts", posts_path, class: "#{cp(posts_path)} additional_class" %>

回答2:

In my case I have a lot of name spaced controllers, that is why I like to show if the current view also is in the Menu Path, I had use the solution of Michael van Rooijen and then I customize for my case.

Helper

def cp(path)
  "current" if request.url.include?(path)
end

View

<%= link_to "All Posts", posts_path, class: cp(posts_path) %>

Now if my menu bar is /users and my current page is /users/10/post also the link /users is set with "current" class

回答3:

I branched off of Michael's answer and tweaked the helper:

def active_class?(*paths)
  active = false
  paths.each { |path| active ||= current_page?(path) }
  active ? 'active' : nil
end

Here's how you'd use it:

<%= link_to "Bookings", bookings_path, class: active_class?(bookings_path) %>

You can pass multiple paths to it in case you have a tab which could be rendered by multiple views:

<%= content_tag :li, class: active_class?(bookings_path, action: 'new') %>

And the great thing about this is if the conditions are false, it will insert nil. Why is this good? Well, if you provide class with nil it won't include the class attribute on the tag at all. Bonus!

回答4:

In the interest of not having to repeat your self too much by having to check current_page inside the link_to method all the time, here's a custom helper that you can use (put this in app/views/helpers/application_helpers.rb

def link_to_active_class(name, active_class_names, options = {}, html_options = {}, &block)
  html_options[:class] = html_options[:class].to_s + active_class_names if current_page?(options.to_s)
  link_to name, options, html_options, &block
end

Example usage:

<div> <%= link_to_active_class('Dashboard', 'bright_blue', dashboard_path, class: 'link_decor') </div>

if you are on http://example.com/dashboard, then it should return:

<div> <a href='/dashboard' class='link_decor bright_blue'>Dashboard</a> </div>

Regards.

回答5:

I'd do it this way :

<%= link_to "Some Page", some_path, :class => current_page? ? "current" : "" %>

回答6:

A variant to Eric Boehs solution (the most robust one IMHO), if you are linking directly to an object of the class (i.e. you don't show the index), with an added application helper:

def booking_link
 Booking.find(8)
end

You can use the following in the view (the dd is used in the context of zurb foundation)

<%= content_tag :dd, link_to(t('hints.book'), booking_link), class: active_class?(booking_path) %>-

回答7:

I think if would be good idea if you generate whole link_to from your helper method. Why to repeat the same code ( :-) DRY principle)

def create_link(text, path)
  class_name = current_page?(path) ? 'current' : 'any_other_class'

  link_to text, path, class: class_name
end

Now you can use like:

<%= create_link 'xyz', any_path %> (in views) which would render as <a href="/any" class="current">xyz</a>

Hope it helps!

回答8:

I tried to combine a couple of the mentioned techniques with my own needs.

def current_page(path)
  'current' if current_page?(path)
end

def create_nav_link(string, path, method)
  link_to string, path, data: { hover: string }, method: method
end

def create_nav_item(string, path, method = nil)
  content_tag :li, create_nav_link(string, path, method), class: current_page(path)
end

Basically it allows you to use it like this: create_nav_item("profile", profile_path) which will result in: <li><a href="/profile" data-hover="Profile">Profile</a></li>,

or <li class="current"><a href="/profile" data-hover="Profile">Profile</a></li> if this is the current page.

I didn't use request.url.include?(path) since it will also always highlight the "Home" button, and I couldn't think of a work around by far.