在Ruby on Rails中如何根据页面将活动状态应用于导航?

问题描述 投票:0回答:1

所以我有一个nav部分,它在应用程序上呈现每个其他页面都在继承。然后在应用程序中,它正在寻找要渲染的正文内容。导航链接类似于:

<ul class="ul-class">
 <li class="li-class"><a href="1">One</a></li>
 <li class="li-class"><a href="2">Two</a></li>
 <li class="li-class"><a href="3">Three</a></li>
</ul>

编辑:我无法调整li或标签,因为它们是从我们的CMS中下拉的。我唯一可以影响的是在ul或li中添加一个类。

我要做的是,如果一个人点击并转到第二页,那么两个标记为活动,底部有一个边框。像这样的CSS:

.nav-active {
border-bottom: 5px solid #d9d9d9;
padding-bottom: 21px;
}

我知道我有一些jQuery代码可以做到这一点(减去一些边界问题),但我正在尝试以Rails的方式做到这一点。

作为参考,应用程序文件具有:

<body>
  <%= render partial: 'shared/nav' %>
  <%= content_for?(:body) ? yield(:body) : yield %>
  <%= render 'shared/footer' %>
</body>

然后在两个文件中我有:

<%= content_for :head do %>
  <%= stylesheet_pack_tag 'styles/two' %>
<% end %>
<%= content_for :body do%>
  <h2>Words going here</h2>
<% end %>

导航存在,但我希望两个活跃。我尝试过类似的东西但它没有做任何事情:

<%= if current_page?('two') then '.nav-active%>
  <%= content_for :head do %>
  <%= stylesheet_pack_tag 'styles/two' %>
  <% end %>
   <%= content_for :body do%>
    <h2>Words going here</h2>
  <% end %>

是否有更好/实际的方法将CSS应用于Rails中的当前页面?

编辑:还尝试了以下内容:

<%= 'nav-active' if current_page?('/two') %>

这种方式有效但不是真的。它并不是真正应用类,而是使用nav-active这个词。

ruby-on-rails
1个回答
0
投票

您可以像这样定义一个帮助器:

module ApplicationHelper

  def current_class?(test_path)
    return 'nav-active' if request.path == test_path
    ''
  end

end 

并在您的erb模板中使用它:

<li class="li-class <%= current_class?('/two') %> "><a href="2">Two</a></li>

更多的rails方式是使用link_to助手:

<%= link_to "Two", '/2', class: current_class?('/two')  %>

还有一个active_link_to gem包装link_to助手,具有在链接被认为是活动时注入可配置条件的功能。

© www.soinside.com 2019 - 2024. All rights reserved.