Question

我如何获得有效的项目菜单？菜单生成周期

<ul id="menu">  
  <% for page in Page.roots %>  
    <li><%= link_to h(page.name), page %></li>    
  <% end %>
  </ul>

我想为此项使用其他css属性。有任何想法吗？最好是js，jquery ......

Answer 1

$("#menu a[href$='+location.pathname+']").addClass('current');

选择器#menu a会在菜单中找到所有链接。 [href$='+location.pathname+']这会找到以（$=）与当前页面相同的路径结束的链接，而不是添加.addClass('current') css类current

Answer 2

除非链接是当前页面（仅显示没有link_to_unless_current标记的文本），否则a会将链接包装到a标记中。有了一些CSS技巧，你可以把它变成不同的外观。我通常使用这种方法：

<ul id="menu"><%= Page.roots.map do |page|
  content_tag :li, link_to_unless_current(h(page.name), page)
end %></ul>

和以下CSS：

ul#menu li { ...current/selected appearance... }
ul#menu li a { ...linked/normal appearance... }

Answer 3

我倾向于为这种事情生成自己的帮手：

#navigation_helper.rb
def nav_item(name, link, hilight = false)
  content_tag :li, link_to(name, link), :class => ("selected" if hilight)
end

然后在你的视图中，只需将相关的布尔值传递给帮助者：

<ul id="menu">
  <%= nav_item "Foo admin", admin_path, (params[:controller] == "admin") %>
  <%= nav_item "Bar page", pages_path(@page), (params[:controller] == "pages" && params[:action] == "show" && params[:id] == @page.id) %>
  <%= nav_item "Baz example", example_path, any_old_helper? %>
</ul>

你需要考虑一种为动态生成的页面集合实现这种技术的方法，但是哪里有一种方法。：）

活动项目菜单RoR

3 个答案: