所以我有一个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这个词。
您可以像这样定义一个帮助器:
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
助手,具有在链接被认为是活动时注入可配置条件的功能。