Ruby on Rails 网站：向导航栏添加/删除活动类答案

【问题标题】：Ruby on Rails website: Adding/Removing Active Class to NavbarRuby on Rails 网站：向导航栏添加/删除活动类
【发布时间】：2012-12-24 06:28:44
【问题描述】：

我正在使用 Ruby on Rails 构建一个静态网站，并且我有一个如下所示的 application.html.erb 文件：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>BayEquities</title>
    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <%= render "layouts/shim" %>
 </head>
 <body>
  <%= render "layouts/header" %>
  <div class="container">
    <%= yield %>
  </div>
 </body>
</html>

<script type="text/javascript">
  $(function() {
   $('.navbar .nav > li > a').click(function(e){
       $('.navbar .nav > li.active').removeClass('active')
       $(this).parent('li').addClass('active')
    });
  });
</script>

目前，此代码添加了活动类并相应地删除了它。唯一的问题是每次单击新的导航栏链接时，标题部分（下面的代码）都会重新加载。从而在每次点击后将活动类应用于“主页”。

_header.html.erb

<header class="navbar">
  <div class="navbar-inner">
   <a class="brand" id="logo">Bay Equities</a>
   <ul class="nav">
    <li class="active"><%= link_to "Home", "index" %></li>
    <li><%= link_to "Services", "services" %></li>
    <li><%= link_to "Contact Us", "contact" %></li>
   </ul>
  </div>
</header>

对于匆忙的格式化工作，我提前道歉，感谢所有帮助！

【问题讨论】：

试试这个：stackoverflow.com/questions/7548911/…

标签： jquery ruby-on-rails ruby navbar

【解决方案1】：

您是否考虑过将此逻辑转移到 Rails 中？

例如，您可以设置一个辅助方法，根据 params[:action] 分配活动类。

module ApplicationHelper  

  def is_active(action)       
    params[:action] == action ? "active" : nil        
  end

end

然后在您的部分中为您的主页链接：

<li class="<%=is_active('home')%>"><%= link_to "Home", "index" %></li>
<li class="<%=is_active('services')%>"><%= link_to "Services", "services" %></li>
<li class="<%=is_active('contact')%>"><%= link_to "Contact Us", "contact" %></li>

【讨论】：

像魅力一样工作。谢谢！
为什么我曾经想过用 javascript 来做这件事？谢谢！

【解决方案2】：

在application_helper.rb中添加下面的类

def current_class_by(path:)
    return 'active' if request.path == path ''
end

菜单链接看起来像这样。

<%= link_to(dashboard_path, class: "nav-link #{current_class_by(path: dashboard_path)}") do %>
    <i class="nav-icon __icon-tachometer"></i>
    <p><%= t('dashboard_admin.menus.dashboard') %></p>
<% end %>

【讨论】：

这个答案只增加了8年前的原始答案。