logo标签列表

Ruby on Rails如何在导航栏中高亮显示当前链接？

ruby-on-railsmenuhighlight
11

请问有人能告诉我如何使用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>
我不太清楚你想要什么。你所说的“current link”是指指向当前页面的链接吗？而“controller option”又是什么意思呢？我建议的正常解决方案是让你的“link_to”适应情况，并在指向当前页面时添加一个“current”类。 - nathanvda
4个回答
8
第一种方法是处理当前的controller_name和action_name来检测您所在的页面。这样做很好，但它会使服务器端与客户端特定的模板有点混合。Rails帮助程序使用的方式是link_to_unless_current。最小化使用JS。在此处查看示例：here 第二种方法是解析$(location)，并直接向选定的导航项添加某个类以突出显示它。
第三个（取决于对象）是构建一个具有实体当前状态的JS对象，并添加将类添加到活动导航的方法。然后，您可以实例化此JS类，传递对象并保留逻辑封装。
1
我建议您不要混合使用JS功能层，尽量保持它们分开。 - Anatoly
5

像这样的东西对你有用。当然，你需要根据自己的目的进行调整，也许在匹配方面变得更加复杂（当前只能匹配路径，就像你的示例一样）。

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

更好的方法是在某个地方定义一个“current”类，然后简单地添加它：
/* in some stylesheet */
#navigation li.current { background-color: #ff0; }

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

有几种方法可以实现这个功能，但如果你想要一个简单的方法，我建议在你的body标签中添加一个类。

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

然后在你的css中，你可以进行以下操作。
body.menus_controller  #navigation a.menunav,
body.drinks_controller #navigation a.drinknav {
  background-color : yellow
  color : blue
}

如果您想要拆分多个页面，这可能会变得复杂，但对于此基本示例，应该是可以的。

1

使用Rails助手：link_to_unless_current

  • 简单且最快。

  • 我喜欢@Anatoly的想法，使用link_to_unless_current助手，因此我想出了以下解决方案。复制并粘贴以节省时间：

它是做什么的？

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

希望这有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接