Rails + Javascript：根據當前頁面粗體菜單鏈接

我有一個簡單的導航菜單，其中包含針對不同頁面的純html鏈接。所有這些頁面共享此菜單，這是分開的部分。Rails + Javascript：根據當前頁面粗體菜單鏈接

我希望將當前頁面的鏈接以粗體突出顯示。我的（非工作）實現的通用版本是這樣的：

# 'pagetwo' view 
<% @bold = "pagetwo" %> 
<%= render :partial => "shared/nav" %> 

# partial 
<%= link_to "Home", home_url, :id => "home" %> 
<%= link_to "Page 1", pageone_url, :id => "pageone" %> 
<%= link_to "Page 2", pagetwo_url, :id => "pagetwo" %> 

<% if @bold.present? %> 
    <script> 
    document.getElementById('<%= @bold %>').bold(); 
    </script> 
<% end %>

如果這是一個可怕的實現，我希望得到任何幫助改進它 - 它可能巨大提高我如何完成這些事情的理解在將來。當然，也有上面的代碼無法正常工作的小問題！

注 - script標記的確顯示了正確的值 - 它實際上並未使文本變爲粗體。

注意2 - 如果可能的話，我想避免使用JQuery/Prototype作爲解決方案。

link_to_unless_current建議似乎正在工作。有誰知道如何使用這種方法爲每個結果分配不同的CSS類？

來源

2011-03-16 sscirrus

爲什麼你想使用JavaScript的額外複雜？ – 2011-03-16 23:41:12

這裏css文件是我找到了解決辦法，這是最緊湊的我還沒有看到。它建立在@thatothermitch給出的答案上（謝謝你，+1！）。

我用link_to_unless_current的所有環節，即

# partial 
<div id="manage_list"> # already surrounds the entire partial 
    <%= link_to_unless_current "Home", home_url, :id => "home" %> 
    <%= link_to_unless_current "Page 1", pageone_url, :id => "pageone" %> 
    <%= link_to_unless_current "Page 2", pagetwo_url, :id => "pagetwo" %> 
</div>

然後我添加CSS樣式，拿起是否存在<a>標籤：

#manage_list p{ font-weight:bold; } 
#manage_list p a{ font-weight:normal; }

這樣一來，就沒有必要傳遞任何變量，編寫任何JavaScript，或添加任何助手。

我希望這對任何遇到相同問題的人都有幫助。:)

來源

2011-03-17 11:20:28 sscirrus

除非您需要更改頁面請求之間的聯繫的膽量（即以響應客戶端的事件），你可能會考慮使用link_to_unless_current塊形式，或爲一個更通用的解決方案，看看current_page?

另一種選擇可能是根據當前頁面向正文（或類似的容器元素）添加類，然後編寫CSS規則以針對特定上下文中的鏈接。例如：

body.home a#home_link { font-weight: bold } 
body.about a#about_link { font-weight: bold }

來源

2011-03-16 21:20:32 thatothermitch

你知道爲什麼javascript本身沒有成功地使'link_to'變大嗎？ – sscirrus 2011-03-16 21:46:32

您可以在此做一個簡單的輔助

在應用助手將這個

def set_selected(url_hash) 
    current_page?(url_hash) ? "current" : "" 
end

您的鏈接將調用輔助函數來設置類名

<%= link_to "Home", home_url, :id => "home", :class => set_selected({:controller => 'homes', :action => 'index'}) %> 
<%= link_to "Page 1", pageone_url, :id => "pageone", :class => set_selected({:controller => 'page_ones', :action => 'index'}) %>

current類的CSS定義在application.css或任何其他呃在你的應用程序

.current{ 
    font-weight:bold; 
}

來源

2011-03-17 05:52:33 Pravin

Rails + Javascript：根據當前頁面粗體菜單鏈接

回答

相關問題