Ruby on Rails网站:向Navbar添加/删除活动类

asi*_*ing 4 ruby jquery ruby-on-rails navbar

我正在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>
Run Code Online (Sandbox Code Playgroud)

目前,此代码添加活动类并相应地删除它.唯一的问题是每次点击新的导航栏链接时,标题部分(下面的代码)会重新加载.因此,每次点击后将活动类应用于"Home".

_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>
Run Code Online (Sandbox Code Playgroud)

我提前为匆忙的格式化工作道歉,感谢所有的帮助!

Noz*_*Noz 13

您是否考虑将此逻辑移至rails?

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

module ApplicationHelper  

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

end
Run Code Online (Sandbox Code Playgroud)

然后在你的部分主页链接:

<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>
Run Code Online (Sandbox Code Playgroud)