在Rails中动态添加活动类到bootstrap li

时间:2013-07-05 05:42:57

标签: ruby-on-rails twitter-bootstrap twitter-bootstrap-rails

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

最好的方法是什么?我打算去每个页面,并在底部有一个jQuery函数添加类active。还有更好的方法吗?

7 个答案:

答案 0 :(得分:53)

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

答案 1 :(得分:14)

在我看来,更简洁的方法是在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中的代码有点难以阅读。

答案 2 :(得分:6)

对于任何有意识到这一点的人,这里有一个示例,我的路径和文件名明确列出。作为一个相当新的铁杆人,我无法搞清楚。感谢上面回答的其他人,因为它帮助我解决了问题!

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

就是这样!现在,您的应用程序将动态地将“活动”类添加到当前正在查看的任何页面(即,它是导航栏中的相应列表项)。这比向每个页面(视图)手动添加导航栏然后更新“活动”类要简单得多(也更干)。

答案 3 :(得分:3)

我会发布我根据其他人创建的答案,因为在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>

答案 4 :(得分:2)

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

例如:

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

答案 5 :(得分:1)

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

完美的自举导航!

答案 6 :(得分:1)

为什么只限制li元素?为什么不支持多个类名和active?这个解决方案让我:

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

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

感谢之前的回答12resources