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>

來源

2011-09-25 blawzoo

這對於我來說並不完全清楚你想要什麼。有了'當前鏈接'，你的意思是指向當前頁面的鏈接？你用'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 
}

這可能很複雜，如果你有要拆分，多個頁面，但是這個基本的例子，它應該沒問題。

來源

2011-09-25 22:08:32

像這樣的東西會爲你工作。當然，你必須根據你的目的調整它，也許在比賽中更加複雜（目前這隻會匹配路徑，就像你在例子中那樣）。

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

來源

2011-09-25 22:15:43 numbers1311407

第一種方法是處理當前CONTROLLER_NAME和ACTION_NAME來檢測一下頁面上。這很好，但它爲服務器端添加了一些特定於客戶端的模板。鐵路幫手使用這種方式是link_to_unless_current。 JS的最小使用量。看一個例子here

第二個是解析$（位置），並直接添加一個特定的類到選定的導航項目來突出顯示它。

第三個（取決於一個對象）是建立一個具有實體當前狀態的JS對象，並添加方法將一個類添加到活動的導航。然後你可以實例化這個JS類，傳遞對象並保持邏輯封裝。

來源

2011-09-26 00:24:19 Anatoly

我建議你不要混合JS finuityality圖層，儘量讓它們分開 – Anatoly

Ruby on Rails在導航欄上突出顯示當前鏈接？

回答

相關問題