1

私はこのようなナビを持っています：

<nav>
  <ul class='nav nav-pills'>
    <li>
      <%= link_to 'link1', '#' %>
    </li>
    <li>
      <%= link_to 'link1', '#' %>
    </li>
  </ul>
</nav>

私のルート、ビュー、およびコントローラーは、パラメーターに基づいて、またはアクションのルートの指定されたデフォルトに設定されたインスタンス変数を使用して、両方が同じビューをレンダリングするようroot_url/.../actionに 設定されています。ビューの後半で、 の名前に一致するパーシャルをレンダリングしています。root_url/.../action/:page_id@page:page_id@page

私がやろうとしているのは、リンク テキストが の値と一致するに設定class='active'することです。<li>@page

私の最初の傾向は、DRY のままにしwindow.page_idて、一致するように設定し@page、CoffeeScript を使用してクラスを追加することでしたが、ページの読み込みとクラスの設定の間に非常に顕著な遅延が発生しました。

これを達成するための最良の方法を知っている人はいますか？<li>現在、各要素にルビを埋め込んでいますが、これはむしろ望ましくありません。

4

3 に答える 3

4

別のSO投稿から借用し、ニーズに合わせてわずかに変更しましたRails 3で「現在の」クラスをnavに追加する最良の方法

def nav_link(link_text, page)
  class_name = link_text == page ? 'active' : ''

  content_tag(:li, :class => class_name) do
    link_to link_text, page
  end
end

次のように使用されます:

nav_link 'Home', @page
于 2013-01-15T02:51:43.500 に答える
1

Zeiv の回答を拡張すると、URL を比較できます。

ヘルパー メソッド:

def nav_link(link_text, link_path)
  content_tag(:li, class: ('active' if link_path == url_for(only_path: true)) ) do
    link_to link_text, link_path
  end
end

ビューでこれを行うことができます：

<%= nav_link "Some Page", some_page_path %>
于 2014-02-22T05:17:55.080 に答える
0

99miles の回答を拡張して、これを対応するヘルパーに入れました。

def nav_link(link_text, link_path, current_page)
  content_tag(:li, class: ('active' if link_text.downcase.gsub(' ', '_') == current_page) ) do
    link_to link_text, link_path
  end
end

こうすること<li>で、アクティブでない要素に空のクラスがなくなり、リンク テキストにスペースが含まれている場合でも機能します。

次のようなビューで使用されます。

<%= nav_link "My Page", page_path('my_page'), @page %>

編集：

または、リンクのテキストを:page_id

def nav_link(link_text, link_path, page_id, current_page)
  content_tag(:li, class: ('active' if page_id == current_page) ) do
    link_to link_text, link_path
  end
end

それからあなたはすることができます

<%= nav_link "My Link", page_path('my_page'), 'my_page', @page %>
于 2013-01-15T03:28:56.910 に答える