web-dev-qa-db-ja.com

Rails 3？-現在のページを強調表示する最善の方法-条件付きでリンクにCSSクラスを適用する

次のコードの場合：

<%= link_to "Some Page", some_path %>

current_page?‎ヘルパーメソッドを使用してcssクラスcurrentを適用するにはどうすればよいですか？

または、他にもっと良い方法がある場合は？

ruby-on-railsrubyruby-on-rails-3ruby-on-rails-3.1
48
Jacob

App/helpers/application_helper.rb内

def cp(path)
  "current" if current_page?(path)
end

あなたの見解では：

<%= link_to "All Posts", posts_path, class: cp(posts_path) %>

基本的には、その周りに単純なラッパーを記述します。さらに、メソッドを拡張して、引数を追加することで追加のクラスを適用できるようにすることもできます。ビューを簡潔/乾燥した状態に保ちます。または、メソッドを拡張せずに、単純な文字列補間を実行してクラスを追加することもできます。

<%= link_to "All Posts", posts_path, class: "#{cp(posts_path)} additional_class" %>
89
Michael van Rooijen

私の場合、名前空間のコントローラーがたくさんあるので、現在のビューもメニューパスにあるかどうかを確認したいので、Michael van Rooijenのソリューションを使用してから、ケースに合わせてカスタマイズしました。

ヘルパー

def cp(path)
  "current" if request.url.include?(path)
end

見る

<%= link_to "All Posts", posts_path, class: cp(posts_path) %>

ここで、メニューバーが/ usersで、現在のページが/ users/10/postの場合、リンク/ usersにも「現在の」クラスが設定されています

18
rderoldan1

私はマイケルの答えから分岐し、ヘルパーを微調整しました：

def active_class?(*paths)
  active = false
  paths.each { |path| active ||= current_page?(path) }
  active ? 'active' : nil
end

使用方法は次のとおりです。

<%= link_to "Bookings", bookings_path, class: active_class?(bookings_path) %>

複数のビューでレンダリングできるタブがある場合は、それに複数のパスを渡すことができます。

<%= content_tag :li, class: active_class?(bookings_path, action: 'new') %>

そして、これの素晴らしいところは、条件がfalseの場合、nilが挿入されることです。なぜこれが良いのですか？まあ、classにnilを指定すると、タグのクラス属性がまったく含まれなくなります。ボーナス！

10
Eric Boehs

link_toメソッド内のcurrent_pageを常にチェックする必要がないため、何度も繰り返す必要がないように、使用できるカスタムヘルパーがあります（これをapp/views/helpers/application_helpers.rbに入れてください）

def link_to_active_class(name, active_class_names, options = {}, html_options = {}, &block)
  html_options[:class] = html_options[:class].to_s + active_class_names if current_page?(options.to_s)
  link_to name, options, html_options, &block
end

使用例：

<div> <%= link_to_active_class('Dashboard', 'bright_blue', dashboard_path, class: 'link_decor') </div>

http://example.com/dashboardを使用している場合は、次のように返されます。

<div> <a href='/dashboard' class='link_decor bright_blue'>Dashboard</a> </div>

よろしく。

4
Nik So

私はこのようにします：

<%= link_to "Some Page", some_path, :class => current_page? ? "current" : "" %>
3
thoferon

私は、言及された手法のいくつかを自分のニーズと組み合わせようとしました。

_def current_page(path)
  'current' if current_page?(path)
end

def create_nav_link(string, path, method)
  link_to string, path, data: { hover: string }, method: method
end

def create_nav_item(string, path, method = nil)
  content_tag :li, create_nav_link(string, path, method), class: current_page(path)
end
_

基本的には、次のように使用できます：create_nav_item("profile", profile_path)これにより、_<li><a href="/profile" data-hover="Profile">Profile</a></li>_、

または、これが現在のページの場合は_<li class="current"><a href="/profile" data-hover="Profile">Profile</a></li>_。

request.url.include?(path)は常に「ホーム」ボタンを強調表示するため、使用しませんでした。

0
Glubi

ヘルパーメソッドからlink_to全体を生成する場合は、良い考えだと思います。同じコードを繰り返す理由（:-) DRY原則）

def create_link(text, path)
  class_name = current_page?(path) ? 'current' : 'any_other_class'

  link_to text, path, class: class_name
end

これで次のように使用できます：

<%= create_link 'xyz', any_path %>（ビュー内）<a href="/any" class="current">xyz</a>としてレンダリングされます

それが役に立てば幸い！

0
Dusht

クラスのオブジェクトに直接リンクしている場合（つまり、インデックスを表示しない場合）、アプリケーションヘルパーを追加した、Eric Boehsソリューションのバリアント（最も堅牢なIMHO）。

def booking_link
 Booking.find(8)
end

ビューでは以下を使用できます（ddはzurbファウンデーションのコンテキストで使用されます）

<%= content_tag :dd, link_to(t('hints.book'), booking_link), class: active_class?(booking_path) %>-
0
Jerome