我正在用 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>
我提前为匆忙的格式化工作道歉，感谢所有帮助!
最佳答案
您是否考虑过将此逻辑转移到 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>
关于jquery - Ruby on Rails 网站 : Adding/Removing Active Class to Navbar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14248258/