現在のページのナビゲーションリンクをレールで変更する

Question

申し訳ありませんが、タイトルが何であるべきかわからないので、誰かが私の質問に最も合うように変更してください。

基本的に、私はこのようなリストがあります：私は（Contantを、ホーム、）の午前どのページにdepeding

<li class="active"><%= link_to "Home", root_path %></li> 
<li><%= link_to "About", about_path %></li> 
<li><%= link_to "Contact", contact_path %></li> 

を、私はclass="active"属性を持って対応する<li>タグをしたいです。これを行う最良の方法は何ですか？

@titleには、ナビゲートされているすべてのページに設定されたクラス変数があります。

Answer 1

link_to_unless_currentヘルパーを使用してください。わずかに異なるCSSが必要ですが、それはそれだけの価値があります。 @titleなどを心配する必要はなく、現在のページへのリンクが混乱することはありません。たとえば、次のコマンドを使用します。

<nav> 
    <% [["Home", :home], ["About", :about], ["Contact", :contact]].each do |name,url| %> 
    <li><%= link_to_unless_current(name, url) %></li> 
    <% end %> 
</nav> 

そして、あなたが「アクティブ」の場合は、大胆かつ緑色にしたいと、このCSSを使用します知って

nav li { /* active case */ 
    font-weight: bold; 
    color: green; 
} 
nav li a { /* normal, link case */ 
    font-weight: normal; 
    color: blue; 
} 

Answer 2

使用current_page?(options)をもしコントローラ/アクション/ paramsはURLに対応し、それに基づいてクラスを切り替えます。このようなヘルパー（未テスト）で：

def nav_item(name, path) 
    if current_page?(path) 
    @title = name 
    end 
    content_tag('li', :class=>(current_page?(path) ? 'active' : nil)){link_to(name,path)} 
end 

<%= nav_item 'Home', root_path %> 
<%= nav_item 'About', about_path %> 
<%= nav_item 'Contact', contact_path %> 

Answer 3

は、現在のコントローラとアクションをインスタンス化するapplication_controller.rbで前にフィルタを持っています。

# application_controller.rb 
before_filter :instantiate_controller_and_action_names 

def instantiate_controller_and_action_names 
    @current_action = action_name 
    @current_controller = controller_name 
end 

そのリンクのアクションとコントローラが最新である場合、cssクラスセットとのリンクを生成するヘルパーを定義します。

module ApplicationHelper 
    def section_link_to(name, url_options, html_options = {}) 
    if action.eql?(@current_action) and controller.eql?(@current_controller) 
     link_to(name, url_options, html_options, :class => 'current') 
    else 
     link_to(name, url_options, html_options) 
    end 
    end 
end 

アクティブリンク強調するために、あなたのCSSを定義します。

nav li.active { /* current */ 
    font-weight: bold; 
    background: green; 
} 

は、この情報がお役に立てば幸いです。