Question

所以我有一个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这个词。

Answer 1

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

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帮助程序，可以在链接被认为是活动时注入可配置的条件。

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

1 个答案: