Question

有人能告诉我如何使用css突出显示（带颜色）导航栏上的当前链接吗？我不想使用控制器选项。以下是来自shared / menu.html.erb的代码：

 <div id = "navigation">

  <ul>

  <li id="menu"><%=link_to "Menu", menus_path, :class => "menunav"%></li>
 <li id="drink"><%=link_to " Drinks", drinks_path, :class => "drinknav"%> </li>

 </ul>

 </div>

Answer 1

第一种方法是处理当前的 controller_name 和 action_name ，以检测您所在的页面。它很好，但它为客户端特定的模板添加了一些服务器端。 rails helper使用的方式是 link_to_unless_current 。 JS的最低使用量。查看示例here

第二种是解析$（位置）并直接将某个类添加到所选导航项以突出显示它。

第三个（取决于对象）是使用当前的实体状态构建JS对象，并添加方法以将类添加到活动的nav。然后你可以实例化这个JS类，传递对象并保持逻辑封装。

Answer 2

这样的东西对你有用。当然你必须根据你的目的调整它，可能会使匹配变得更复杂（目前这只会匹配路径，就像你的例子中一样）。

$("#navigation a[href="+window.location.pathname+"]")
  .closest('li')
    .css('background-color', '#ff0');

更好的是，你在某个地方定义了一个“当前”类，然后简单地添加它：

/* in some stylesheet */
#navigation li.current { background-color: #ff0; }

/* then the js */
$("#navigation a[href="+window.location.pathname+"]")
  .closest('li')
    .addClass('current');

Answer 3

有几种方法，但如果你是一个简单的，我建议在你的身体上添加一个课程。

<body class="<%= params[:controller] %>_controller">
  ...
</body>

然后在你的CSS中你可以做到以下几点。

body.menus_controller  #navigation a.menunav,
body.drinks_controller #navigation a.drinknav {
  background-color : yellow
  color : blue
}

如果您要分割多个页面，这可能会变得复杂，但对于这个基本的例子，它应该没问题。

Answer 4

使用Rails助手：link_to_unless_current

简单快捷。
我喜欢@Anatoly使用link_to_unless_current助手的想法，因此提出了以下解决方案。复制并粘贴以节省您一些时间。

它有什么作用？

如果页面是当前页面，则它将执行该块-您可以添加需要突出显示该链接的CSS类。
如果该页面不是当前页面，则仅返回上面的第一个链接。

希望这会有所帮助。

Ruby on Rails突出显示导航栏上的当前链接？

4 个答案:

使用Rails助手：link_to_unless_current

它有什么作用？