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

问题描述：

任何人都可以告诉我如何使用css来强调（带颜色）导航栏上的当前链接？我不想使用控制器选项。下面是从共享/ menu.html.erb代码：Ruby on Rails在导航栏上突出显示当前链接？

<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>

这对于我来说并不完全清楚你想要什么。有了'当前链接'，你的意思是指向当前页面的链接？你用'controller option'表示什么意思？我建议的正常解决方案是让它适应你的'link_to'并在它指向当前页面时添加一个'current'类。 – nathanvda

答

有几个方法可供选择，但如果你是后一个简单的，我建议增加一类，你的身体。

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

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

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

这可能很复杂，如果你有要拆分，多个页面，但是这个基本的例子，它应该没问题。

答

像这样的东西会为你工作。当然，你必须根据你的目的调整它，也许在比赛中更加复杂（目前这只会匹配路径，就像你在例子中那样）。

$("#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');

答

第一种方法是处理当前CONTROLLER_NAME和ACTION_NAME来检测一下页面上。这很好，但它为服务器端添加了一些特定于客户端的模板。铁路帮手使用这种方式是link_to_unless_current。 JS的最小使用量。看一个例子here

第二个是解析$（位置），并直接添加一个特定的类到选定的导航项目来突出显示它。

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

我建议你不要混合JS finuityality图层，尽量让它们分开 – Anatoly

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

相关推荐