{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 够拽才男人 的问题《Ruby on Rails highlight current link on navigation》','https://www.manongdao.com/q-767768.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Can anyone tell me how to highlight (with color) the current link on a navigation bar, using css? I don't want to use the controller option. Here is the code from 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>
There are a few approaches to this, but if you're after a simple one, I suggest adding a class to your body.
Then in your css you can do the following.
This can get complicated if you have multiple pages you want to split, but for this basic example it should be ok.
Something like this would work for you. Of course you'd have to tweak it to your purposes, maybe get more sophisticated with the match (currently this would only match paths, as you have in your example).
Better still, you'd define a "current" class somewhere, then simply add it:
The first approach is to handle current controller_name and action_name to detect what page you are on. It's good, but it adds a bit of server-side to client-specific template. The rails helper uses that way is link_to_unless_current. Minimum usage of JS. See an example here
The second is to parse $(location) and directly add a certain class to the selected navigation item to highlight it.
The third (depends on an object) is to build a JS object with current state of entity and add methods to add a class to an active nav. Then you can instantiate this JS class, passing on the object and keeping the logic encapsulated.