突出显示菜单中的选项卡

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') %>