Best way to add “current” class to nav in Rails 3

后端 未结 24 1702
天涯浪人
天涯浪人 2020-11-29 15:05

I have some static pages in a navigation menu. I want to add a class like \"current\" to the item which is currently displaying.

The way I am doing so is to add tons

相关标签:
24条回答
  • 2020-11-29 15:20

    I know it is a out dated answer, but you can easily ignore all these current page check by using a link_to helper wrapper, called active_link_to gem, it works exactly what you want, add a active class to current page link

    0 讨论(0)
  • 2020-11-29 15:21

    I think I came up with a simple solution that might be helpful for a lot of use cases. This lets me:

    • Support not only plain text but HTML inside link_to (e.g. add an icon inside the link)
    • Add just few lines of code to application_helper.rb
    • Append active to the whole class name of the link element instead of it being the sole class.

    So, add this to application_helper.rb:

    def active_class?(class_name = nil, path)
      class_name ||= ""
      class_name += " active" if current_page?(path)
      class_name.strip!
      return class_name
    end
    

    And on your template you can have something like this:

    <div class="col-xs-3">
      <%= link_to root_path, :class => active_class?("btn btn-outline-primary", root_path) do %>
        <i class="fa fa-list-alt fa-fw"></i>
      <% end %>
    </div>
    

    As bonus you can specify or not a class_name and use it like this: <div class="<%= current_page?(root_path) %>">

    Thanks to previous answers 1, 2 and resources.

    0 讨论(0)
  • 2020-11-29 15:23

    I think the best way is

    application_helper.rb:

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

    And in menu:

    <li class="<%= is_active('controller', 'action') %>">
    
    0 讨论(0)
  • 2020-11-29 15:23

    Let me show my solution:

    _header.html.erb:

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

    application_helper.rb:

     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
    

    application_controller.rb:

    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
    
    0 讨论(0)
  • 2020-11-29 15:24

    The current_page? method isn't flexible enough for me (say you set a controller but not an action, then it'll only return true on the controller's index action), so I've made this based on the other answers:

      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
    

    Example:

    nav_link_to "Pages", pages_url, :controller => 'pages'
    
    0 讨论(0)
  • 2020-11-29 15:26

    My easy way -

    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>
    

    main_controller.erb,

    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
    

    Thanks.

    0 讨论(0)
提交回复
热议问题