tab Highlight trong menu

Question

Tôi có một thực đơn mà là một ul

Home | Calendar | Settings 

Tôi muốn nhấn mạnh (thông qua một lớp css) tab được chọn trong menu.

Một số liên kết (Home và Lịch) cũng có subselections

Home | *Calendar* | Settings 
------------------------- 
Add event | Edit event 

Ofcourse khi chỉnh sửa sự kiện được chọn, Lịch nên vẫn được đánh dấu.

Tôi có thể tiếp cận tốt nhất bằng cách sử dụng đường ray và css như thế nào?

Cảm ơn

Answer 1

Cách đơn giản nhất là kiểm tra xem bộ điều khiển nào đang được sử dụng. Tôi đã tạo nên tên bộ điều khiển, vì vậy tất nhiên bạn sẽ thay thế 'nhà riêng', 'lịch' và 'cài đặt' bằng tên chính xác.

<ul> 
    <li class="<%= "highlighted" if params[:controller] == "home" %>">Home</li> 
    <li class="<%= "highlighted" if params[:controller] == "calendar" %>">Calendar</li> 
    <li class="<%= "highlighted" if params[:controller] == "settings" %>">Settings</li> 
</ul> 

Answer 2

Trong file helper của bạn:

def is_active?(page_name) 
    "active" if params[:action] == page_name 
end 

Trong mẫu file:

link_to 'Home', '/', :class => is_active?("index") 
link_to 'About', '/about', :class => is_active?("about") 
link_to 'contact', '/contact', :class => is_active?("contact") 

Tôi thấy điều này trên: http://juliocapote.com/post/52081481/highlight-link-based-on-current-page-in-rails

Answer 3

Tôi có cùng một vấn đề và kết thúc việc tạo người giúp đỡ. về cơ bản nó thay thế các helper link_to url nên quấn liên kết với li và thêm lớp "menu_selected" nếu bộ điều chỉnh dòng phù hợp với điều khiển liên kết

mẫu sử dụng

<%= menu_link_to "Home", home_path %> 

def menu_link_to(*args, &block) 
    url = args[1] 
    mapping = ActionController::Routing::Routes.recognize_path(url) 

    class_property = "menu_selected" if mapping[:controller] == controller.controller_path 
    content_tag :li, :class => class_property do 
    link_to *args, &block 
    end 
end 
 

Answer 4

tôi định cư trên giải pháp này mà tôi thích rất nhiều:

Trong helper

def active_if(options) 
    if params.merge(options) == params 
    'nav-active' 
    end 
end 

Và trong giao diện xác định những gì làm cho con đường duy nhất:

<%= link_to 'Home', root_path, class: active_if(action: 'home') %> 
<%= link_to 'Aricles', articles_path, class: active_if(controller: 'articles') %> 

Answer 5

Update để trả lời @ ahmy cho Rails 3.2:

def menu_list_item(*args, &block) 
    url = args[1] 
    mapping = Rails.application.routes.recognize_path(url) 

    li_class = 'active' if mapping[:controller] == controller.controller_path 
    content_tag :li, :class => li_class do 
    link_to *args, &block 
    end 
end 

ví dụ Rails.application.routes.recognize_path thay vì ActionController::Routing::Routes.recognize_path.