在引导导航栏中。您可以通过添加类 active 来获得单击按钮的效果。自然，我想在我的页面上使用它。例如，如果我在关于我们的页面上，我希望点击关于我们的按钮。
解决此问题的最佳方法是什么？我要去每个页面，在底部有一个 jQuery 函数，将类 active 添加到它。有没有更好的办法？
【问题讨论】：
标签： ruby-on-rails twitter-bootstrap twitter-bootstrap-rails
了解current_page? here
您可以使用current_page?添加处理逻辑的方法，例如方法：
module ApplicationHelper
def active_class(link_path)
current_page?(link_path) ? "active" : ""
end
end
示例bootstrap 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>
HAML
%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 here
【讨论】：
is_active? 方法？
在我看来，更简洁的方法是在 application_helper.rb 中编写 link_to_in_li 方法：
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 中的代码有点难以阅读。
【讨论】：
content_tag :li, class: "#{active} other-class" do
_in_li 添加到您可能已经拥有的 url 助手中，因为它采用相同的参数。谢谢。
对于无法理解这一点的任何人，这里有一个示例，其中明确列出了我的路径和文件名。作为一个刚接触 Rails 的新手，我很难弄清楚。感谢上面回答的其他人，因为它帮助我弄清楚了！
我将 Bootstrap 导航栏放在了我的 application.html.erb 文件中：
<div class="navbar-header">
<a class="navbar-brand" href="/">Mapper</a>
<ul class="nav navbar-nav">
<li class="<%= is_active?('/') %>"><%= link_to "Home", '/' %></li>
<li class="<%= is_active?('/main/map') %>"><%= link_to "Map", '/main/map' %></li>
<li class="<%= is_active?('/main/about') %>"><%= link_to "About", '/main/about' %></li>
</ul>
</div>
这在 application_helper.rb 文件中：
module ApplicationHelper
def is_active?(link_path)
current_page?(link_path) ? "active" : ""
end
end
就是这样！现在，您的应用程序将动态地将“活动”类添加到当前正在查看的任何页面（即，它是导航栏中的相应列表项）。这比手动将导航栏添加到每个页面（视图）然后更新“活动”类要简单得多（也更 DRY）。
【讨论】：
我将发布我基于这些其他人创建的答案，因为在 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>
【讨论】：
请在每个页面中尝试此操作，检查控制器或操作并添加 css
例如：
<li class= <%= (controller.controller_name.eql?('pages') && controller.action_name.eql?('index') )? 'active':''%> ><%= link_to 'my page', pages_path%></li>
【讨论】：
你可以在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>
非常适合引导导航！
【讨论】：
为什么要限制自己只使用li 元素？为什么不支持多个类名以及active？这个解决方案让我：
link_to 内的 HTML（例如，在链接内添加图标）application_helper.rb 中添加几行代码
active 附加到链接元素的整个类名，而不是作为唯一的类。所以，把它加到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>
您也可以指定或不指定class_name 并像这样使用它：
<li class="<%= active_class?(root_path) %>">Home</li>
【讨论】：