twitter-bootstrap 动态添加活动类到 Rails 中的 bootstrap li

Dynamically add active class to bootstrap li in Rails

提问by Alain Goldman

in the bootstrap navigation bar. You can get the effect of a button being clicked by adding the class active. Naturally, I want to use this on my pages. For example if I'm on the about us page I want the about us button clicked.

在引导程序导航栏中。您可以通过添加类来获得按钮被点击的效果active。当然，我想在我的页面上使用它。例如，如果我在关于我们页面上，我希望点击关于我们按钮。

What is the best way to go about this? I was going to go to each page and at the bottom have a jQuery function add the class activeto it. Is there a better way?

解决这个问题的最佳方法是什么？我打算去每个页面，在底部有一个 jQuery 函数将类添加active到它。有没有更好的办法？

回答by rails_id

Read about current_page?here

在这里阅读current_page?

You can add a method for handle logic with current_page?, example a method :

您可以添加处理逻辑current_page?的方法，例如方法：

module ApplicationHelper

 def active_class(link_path)
  current_page?(link_path) ? "active" : ""
 end

end

example bootstrap navbartemplate

示例引导程序导航栏模板

<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>

So, on view looks like

所以，在视图上看起来像

HTML

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

---

---

Or you can use request.fullpathto get current full of path if a current path have a parameter

或者request.fullpath，如果当前路径有参数，您可以使用获取当前完整的路径

example

例子

<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>

and on your application_helper.rb

并在你的 application_helper.rb

def active_class(link_path)
  request.fullpath == link_path ? "active" : "" 
end

read about request.fullpath here

在这里阅读 request.fullpath

回答by Wawa Loo

in my opinion, a cleaner way to achieve that is to write a link_to_in_limethod in application_helper.rb:

在我看来，一种更简洁的方法是link_to_in_li在 application_helper.rb 中编写一个方法：

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

then use it this way

然后以这种方式使用它

<%= link_to_in_li "Home", root_path, id: "home_link" %>

I find the code inside lia little difficult to read.

我觉得里面的代码li有点难读。

回答by David

For anyone having trouble making sense of this, here is an example with my paths and filenames laid out explicitly. As a pretty new person to rails, I was having trouble figuring it out. Thanks to the other people who answered above, as it helped me figure it out!

对于任何无法理解这一点的人，这里有一个示例，其中明确列出了我的路径和文件名。作为一个刚接触 Rails 的人，我很难弄清楚。感谢上面回答的其他人，因为它帮助我弄清楚了！

I placed the Bootstrap navbar in my application.html.erb file:

我将 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>

This goes in the application_helper.rb file:

这在 application_helper.rb 文件中：

module ApplicationHelper

def is_active?(link_path)
 current_page?(link_path) ? "active" : ""
end

end

That's it! Now your application will dynamically add the 'active' class to whatever page is currently being viewed (i.e. it's corresponding list item in the navbar). This is much simpler (and more DRY) than adding the navbar manually to each page (view) and then updating the 'active' class.

而已！现在，您的应用程序将动态地将“活动”类添加到当前正在查看的任何页面（即导航栏中相应的列表项）。这比手动将导航栏添加到每个页面（视图）然后更新“活动”类要简单得多（也更枯燥）。

回答by Bruno Casali

I'll post my answer that I created based on these others because in case of CRUD views the active class wasn't been placed.

我将发布我基于这些其他人创建的答案，因为在 CRUD 视图的情况下，未放置活动类。

module ApplicationHelper
 def active_class(name)
   controller_name.eql?(name) || current_page?(name) ? 'active' : ''
 end
end

My views use something like this:

我的观点使用这样的东西：

  <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>

回答by Debadatt

Please try this in each page, check the cotroller or action and add the css

请在每个页面中尝试此操作，检查控制器或操作并添加 css

For example:

例如：

<li class= <%= (controller.controller_name.eql?('pages') && controller.action_name.eql?('index') )? 'active':''%> ><%= link_to 'my page', pages_path%></li>

回答by Dusht

You may define a helper method in application_helper.rb

您可以在 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

Now you can use like:

现在你可以使用像：

create_link 'xyz', any_pathwhich would render as <li class="active"><a href="/any">xyz</a></li>

create_link 'xyz', any_path这将呈现为 <li class="active"><a href="/any">xyz</a></li>

Perfect for bootstrap navigation!

非常适合引导导航！

回答by Juan Diego Gonzales

Why limit yourself to only lielements? And why not support multiple class names along with active? This solution lets me:

为什么只限于li元素？为什么不支持多个类名active？这个解决方案让我：

• Support not only plain text but HTML inside link_to(e.g. add an icon inside the link)
• Add just few lines of code to application_helper.rb
• Append activeto the whole class name of the link element instead of it being the sole class.

• 不仅支持纯文本，还支持 HTML link_to（例如在链接内添加图标）
• 只需添加几行代码即可 application_helper.rb
• 附加active到链接元素的整个类名，而不是它是唯一的类。

So, add this to application_helper.rb:

因此，将其添加到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

And on your template you can have something like this:

在你的模板上，你可以有这样的东西：

<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>

You can also specify or not a class_nameand use it like this:

您还可以指定或不指定 aclass_name并像这样使用它：

<li class="<%= active_class?(root_path) %>">Home</li>

Thanks to previous answers 1, 2and resources.

由于以前的答案1，2和资源。