Question

我的菜单是ul

Home | Calendar | Settings

我想突出显示（通过css类）菜单中的选定选项卡。

某些链接（主页和日历）也有子选择

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

当选择编辑事件时，仍应突出显示日历。

如何使用rails和css最好地解决这个问题？

由于

Answer 1

最简单的方法是检查正在使用哪个控制器。我编写了控制器名称，所以你当然会用正确的名字替换'home'，'calendar'和'settings'。

<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

在您的帮助文件中：

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

在模板文件中：

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

我发现了这个：http://juliocapote.com/post/52081481/highlight-link-based-on-current-page-in-rails

Answer 3

我选择了这个我非常喜欢的解决方案：

在助手

中

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

在视图中定义了路由的唯一性：

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

Answer 4

我遇到了同样的问题并最终创建了帮手。基本上它取代了link_to url助手，所以它用li包装链接，如果当前控制器与链接控制器匹配，则添加类“menu_selected”

用法样本

<%= 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 5

更新@ ahmy对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

即。 Rails.application.routes.recognize_path代替ActionController::Routing::Routes.recognize_path。

突出显示菜单中的选项卡

5 个答案: