0

非高電圧ページでは、次のコードを使用して、ユーザーがページを表示している場合にナビゲーション要素に「アクティブ」クラスを追加しています。<li class="<%= 'active' if params[:controller] == 'home' %>"><a href="/">Home</a></li>

私の高電圧ページ（liにアクティブクラスが必要です）に対してそれを行う同等の方法は何ですか？

<li class="nav-item"><%= link_to 'Plans', page_path("plans") %></li>
4

4 に答える 4

1

私はこれで終わった：

<li class="nav-item <%= 'active' if page_path == '/about' %>">
  <%= link_to "About", page_path("about") %>
</li>

高電圧は、page_pathページにリンクする方法を提供します。これを使用して、コントローラーの場合と同じように、そのページにいるのかどうかを判断できます。

于 2012-11-22T01:10:08.393 に答える
1

high_volatileのpage_path関数は次のように使用できますcurrent_page?

<li class='<%="active" if current_page?page_path('about') %>'>About</li>
<li class='<%="active" if current_page?page_path('contact') %>'>Contact</li>
于 2013-10-18T20:08:34.037 に答える
0

静的ページなので、HTMLコードで直接書くことができます。

<li class="active nav-item"><%= link_to 'Plans', page_path("plans") %></li>
于 2012-11-21T21:23:50.833 に答える
0

条件付きロジックをビューから除外し、純粋なCSSを使用してアクティブなナビゲーションアイテムをマークする別のソリューションがあります。高電圧ページを含むすべてのビューで使用できます。

module ApplicationHelper
  def body_class
    "#{controller_name} #{controller_name}-#{controller.action_name} #{params['id']}"
  end

  def controller_name
    controller.controller_path.gsub('/','-')
  end
end

レイアウトからヘルパーメソッドを呼び出す

<body class="<%= body_class %>">

これはあなたにこのようなボディクラスを与えるでしょPagesController#showうid=plans

<body class="pages pages-show plans">

ナビゲーションのhtmlは次のようになります

<ul class="nav-items">
  <li class="home">Home</li>
  <li class="plans">Plans</li>
  <li class="contact">Contact</li>
</ul>

次に、CSSを使用して、アクティブにしたいナビゲーションアイテムをターゲットにできます

body.home li.home,
body.plans li.plans,
body.contact li.contact {
  // styles for active item
}
于 2012-11-27T03:32:40.353 に答える