30

ブートストラップ ナビゲーション バーで。クラスを追加することで、ボタンがクリックされた効果を得ることができますactive。当然、これを自分のページで使用したいと思います。たとえば、私たちについてのページにいる場合、私たちについてのボタンをクリックしてもらいたいと思います。

これについて最善の方法は何ですか？各ページに移動し、下部で jQuery 関数を使用してクラスactiveを追加します。より良い方法はありますか？

4

7 に答える 7

58

ここについて読むcurrent_page?

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

module ApplicationHelper

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

end

ブートストラップ 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>

ハムル

%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について読んでください

于 2013-07-05T06:05:31.713 に答える
14

私の意見では、それを実現するためのよりクリーンな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少し読みにくいと思います。

于 2014-04-09T23:50:04.120 に答える
3

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>
于 2016-05-03T11:56:20.687 に答える
2

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

例えば：

<li class= <%= (controller.controller_name.eql?('pages') && controller.action_name.eql?('index') )? 'active':''%> ><%= link_to 'my page', pages_path%></li>
于 2013-07-05T06:26:11.420 に答える
1

でヘルパー メソッドを定義できます。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>

ブートストラップ ナビゲーションに最適です。

于 2015-10-20T08:41:33.303 に答える
1

liなぜ要素だけに制限するのですか？と一緒に複数のクラス名をサポートしないのはなぜactiveですか? このソリューションにより、次のことが可能になります。

  • プレーンテキストだけでなく、内部に HTML をサポートlink_to(例: リンク内にアイコンを追加)
  • ほんの数行のコードをapplication_helper.rb
  • active唯一のクラスではなく、link 要素のクラス名全体に追加します。

したがって、これをに追加し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>

a を指定するかどうかを指定して、次のclass_nameように使用することもできます。 

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

以前の回答1、2、およびリソースに感謝します。

于 2017-01-08T14:51:28.400 に答える