Question

我在application.html中有导航菜单，菜单中有class =“active”。这取决于用户所在的页面。如何动态地确定哪个项目需要具有该类：

以下是我的顶级菜单栏：

<ul>
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Page1</a></li>
   <li><a href="#">Page2</a></li>
   <li><a href="#">Page3</a></li>
</ul>

Answer 1

一种方法是在控制器中有一个@active_page实例变量，您可以在每个操作上设置该变量。你也可以用标题（@title may？）来做这个，所以也许你可以用它来代替。然后在模板中：

<li class="<%= "active" if @active_page == "Home" %>">...</li>

Answer 2

最简单（也可能是最基本的）是使用current_page?。您可以read up in the docs查看其工作原理。作为I've experienced，它并不总能产生你想要的东西。

还有一个宝石navigasmic，如果您的需求相当复杂，它的效果非常好。

有很多方法可以完成你想要做的事情。首先尝试current_page?，如果你发现自己扯掉头发，请继续进行类似于navigasmic的事情。

Answer 3

你可以像这样创建一个简单的助手

  def  nav_link(name, url)
    selected = url.all? { |key, value| params[key] == value }
    link_to(name, url, :class => (selected ? "youarehere tabs" : "tabs"))
  end

<div id="tabs" class="tabs2">
  <%= nav_link %>
  <%= nav_link %>
  <%= nav_linl  %>
</div>

然后添加必要的CSS样式

导轨中的导航菜单

3 个答案: