web-dev-qa-db-ja.com

bootstrap li in Railsにアクティブクラスを動的に追加します

bootstrapナビゲーションバーにあります。クラスactiveを追加すると、ボタンがクリックされた効果を得ることができます。当然、これを自分のページで使用します。たとえば、 「About us」ボタンをクリックしたい「About Us」ページにいます。

これに対処する最良の方法は何ですか？私は各ページに行くつもりでした、そして下部にjQuery関数がそれにクラスactiveを追加させました。もっと良い方法はありますか？

ruby-on-railstwitter-bootstraptwitter-bootstrap-rails
28
Alain Goldman

current_page?について読む ここ

current_page?を使用してハンドルロジックのメソッドを追加できます。メソッドの例：

module ApplicationHelper

 def active_class(link_path)
  current_page?(link_path) ? "active" : ""
 end

end

例 bootstrap navbar テンプレート

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

だから、見たところ

[〜＃〜] html [〜＃〜]

<li class="<%= active_class(some_path) %>">
<%= link_to "text of link", some_path %>
</li>

[〜＃〜] haml [〜＃〜]

%li{:class => active_class(some_path)}
  = link_to "text of link", some_path

または、現在のパスにパラメータがある場合、request.fullpathを使用して現在の完全なパスを取得できます

例

<ul>
 <% Contry.all.each do |c| %>
  <li class="snavitem <%= active_class(contry_path(c)) %>">
    <%= link_to "show #{c.name}", contry_path(c) %>
  </li>
 <% end %>
</ul>

そしてあなたのapplication_helper.rb

def active_class(link_path)
  request.fullpath == link_path ? "active" : "" 
end

request.fullpathについて読む ここ

53
rails_id

私の意見では、それを達成するためのより明確な方法は、link_to_in_li application_helper.rbのメソッド：

def link_to_in_li(body, url, html_options = {})
  active = "active" if current_page?(url)
  content_tag :li, class: active do
    link_to body, url, html_options
  end
end

このように使用します

<%= link_to_in_li "Home", root_path, id: "home_link" %>

li内のコードは少し読みにくいと思います。

14
Wawa Loo

これを理解するのに問題がある人のために、ここに私のパスとファイル名が明示的に配置された例があります。 Railsのかなり新しい人として、私はそれを理解するのに苦労していました。上で答えてくれた他の人たちに感謝します。

Bootstrap navbarをapplication.html.erbファイルに配置しました：

<div class="navbar-header">

  <a class="navbar-brand" href="/">Mapper</a>
  <ul class="nav navbar-nav">

    <li class="<%= is_active?('/') %>"><%= link_to "Home", '/' %></li>
    <li class="<%= is_active?('/main/map') %>"><%= link_to "Map", '/main/map' %></li>
    <li class="<%= is_active?('/main/about') %>"><%= link_to "About", '/main/about' %></li>

  </ul>
</div>

これはapplication_helper.rbファイルにあります：

module ApplicationHelper

def is_active?(link_path)
 current_page?(link_path) ? "active" : ""
end

end

それでおしまい！これで、アプリケーションは、現在表示されているページに「アクティブ」クラスを動的に追加します（つまり、ナビゲーションバーの対応するリストアイテムです）。これは、navbarを各ページ（ビュー）に手動で追加してから「アクティブな」クラスを更新するよりもはるかに簡単です（より多くのDRY）。

6
David

CRUDビューの場合、アクティブなクラスが配置されなかったため、これらの他のものに基づいて作成した私の回答を投稿します。

module ApplicationHelper
 def active_class(name)
   controller_name.eql?(name) || current_page?(name) ? 'active' : ''
 end
end

私の見解は次のようなものを使用しています：

  <ul class="nav navbar-nav">
    <li class="nav-item <%= active_class('/') %>">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item <%= active_class('leads') %>">
      <a class="nav-link" href="/leads">Leads</a>
    </li>
  </ul>
  <ul class="nav navbar-nav pull-right <%= active_class(edit_user_registration_path) %>">
    <li class="nav-item ">
      <a class="nav-link" href="/users/edit">Perfil</a>
    </li>
    <li class="nav-item">
      <%= link_to('Sair', destroy_user_session_path, method: :delete) %>
    </li>
  </ul>
3
Bruno Casali

各ページでこれを試して、コントローラーまたはアクションを確認し、CSSを追加してください

例えば：

<li class= <%= (controller.controller_name.eql?('pages') && controller.action_name.eql?('index') )? 'active':''%> ><%= link_to 'my page', pages_path%></li>
2
Debadatt

li要素のみに制限するのはなぜですか？そして、activeとともに複数のクラス名をサポートしないのはなぜですか？このソリューションでは、次のことができます。

  • プレーンテキストだけでなく、link_to内のHTMLもサポートします（たとえば、リンク内にアイコンを追加します）
  • 数行のコードをapplication_helper.rbに追加します
  • activeをリンク要素の唯一のクラスではなく、リンク要素のクラス名全体に追加します。

したがって、これをapplication_helper.rb：に追加します

def active_class?(class_name = nil, path)
  class_name ||= ""
  class_name += " active" if current_page?(path)
  class_name.strip!
  return class_name
end

そして、あなたのテンプレートでは次のようなものを持つことができます：

<div class="col-xs-3">
  <%= link_to root_path, :class => active_class?("btn btn-outline-primary", root_path) do %>
    <i class="fa fa-list-alt fa-fw"></i>
  <% end %>
</div>

class_nameを指定するかしないかを指定して、次のように使用することもできます：

<li class="<%= active_class?(root_path) %>">Home</li>

以前の回答のおかげで 1 、 2 および resources です。

1
Juan Diego Gonzales

application_helper.rbでヘルパーメソッドを定義できます

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

  content_tag(:li, class: class_name) do
    link_to text, path
  end
end

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

create_link 'xyz', any_pathは<li class="active"><a href="/any">xyz</a></li>としてレンダリングされます

bootstrapナビゲーションに最適！

1
Dusht