在 Rails 中动态添加活动类到引导 li

Posted

技术标签:

【中文标题】在 Rails 中动态添加活动类到引导 li【英文标题】:Dynamically add active class to bootstrap li in Rails 【发布时间】:2013-07-03 03:20:49 【问题描述】:

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

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

【问题讨论】:

【参考方案1】:

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

【讨论】:

如果您使用的是haml,您不会就您的问题说出来。更新答案 很抱歉,但您已经成功了,谢谢。但是为什么 %li:class=> is_active?(some_path) 不起作用? 很高兴为您提供帮助!您是否在助手上添加了is_active? 方法? 不,我照你说的做了,我只是好奇为什么 %li:class=> is_active?(some_path) 不起作用 这里过于迂腐,但以问号结尾的方法应该返回布尔值,而不是 CSS 类字符串。【参考方案2】:

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

【讨论】:

在 Rails 方面非常聪明。 我找到的最简单的答案。此外,如果您需要在 元素上有多个类,您可以简单地添加其他类,如下所示:content_tag :li, class: "#active other-class" do 这很好用,我一直在尝试许多其他解决方案,这对我来说是最好的。 我认为这是迄今为止我读过的最好的解决方案。它是 DRY,它只需要将 _in_li 添加到您可能已经拥有的 url 助手中,因为它采用相同的参数。谢谢。【参考方案3】:

对于无法理解这一点的任何人,这里有一个示例,其中明确列出了我的路径和文件名。作为一个刚接触 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)。

【讨论】:

很好的解决方案。非常适合我。 非常感谢这对我的帮助比其他答案要多,因为我对 Rails 也很陌生。【参考方案4】:

我将发布我基于这些其他人创建的答案,因为在 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>

【讨论】:

【参考方案5】:

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

例如:

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

【讨论】:

【参考方案6】:

你可以在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 将呈现为 &lt;li class="active"&gt;&lt;a href="/any"&gt;xyz&lt;/a&gt;&lt;/li&gt;

非常适合引导导航!

【讨论】:

【参考方案7】:

为什么要限制自己只使用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>

感谢之前的回答 1、2 和 resources。

【讨论】:

以上是关于在 Rails 中动态添加活动类到引导 li的主要内容,如果未能解决你的问题,请参考以下文章

使用引导进度条的 Rails 动态数据进度条

js 动态添加元素(div、li、img等)及设置属性的方法

在 ruby​​ on rails 动态 id 不能用于两个词,但可以完美地用于一个词——使用引导程序崩溃

在 Vue 中动态地将元素添加到可排序的 LI

将附加字段动态添加到 rails 表单

带有活动选项卡的动态引导导航