当导航栏位于应用程序模板中时，如何设置选项卡处于活动状态？答案

【问题标题】：How to set a tab active when the nav bar is in the application template?当导航栏位于应用程序模板中时，如何设置选项卡处于活动状态？
【发布时间】：2011-12-01 17:48:58
【问题描述】：

我有一个像这样的简单导航栏：

<ul class="nav">
   <li><a href="<%= index_url %>">Home</a></li>
   <li><a href="#about">About</a></li>
   <li><a href="<%= users_url %>">Users</a></li>
</ul>

这是 rails 项目中 application.html.erb 文件的一部分。我希望在当前页面上设置class="active" 属性，但是这很复杂，因为导航栏位于模板中，该模板使用<%= yield %> 生成应用程序的其余部分。如何根据正在加载的页面可靠地设置活动选项卡？

...javascript 被删除，因为它分散了实际问题的注意力。

澄清一下：

Rails 会加载 application.html.erb，它会在调用 <%= yield %> 并渲染我正在加载的任何视图之前渲染所有内容，包括此导航。

当我显示 users/index.html.erb 文件或 users/show.html.erb（基本上来自用户模型的任何内容）时，我希望“用户”选项卡具有 class="active"一个合适的 Rails 方式来做到这一点？

我知道我可以将导航栏移动到每个模型的视图模板并手动设置活动类，但这不是很“干”。

【问题讨论】：

您当前的代码删除然后将类添加到仅单击的元素 - 您可能是指 $(".nav > li").removeClass("active") 首先从所有 lis 中删除该类。
好的，所以我的 javascript 不正确，但我最初的问题仍然存在，如何在导航栏加载后（通过应用程序模板）更改链接上的活动类。一旦我设置了一个类并且点击通过它将加载新页面并清除类设置。

标签： ruby-on-rails ruby

【解决方案1】：

可能不完全是您要查找的内容，但我通常只是编写一个名为“tab”的快速帮助程序，它可以让我在选项卡的视图中设置一个变量，然后使用条件在选项卡上设置类.

# Helper
def tab(value)
  @page_tab = value
end

# View
<% tab "about" %>

# Layout    
<ul class="nav">
   <li><a href="<%= index_url %>" <%= class=\"active\" if @page_tab == "home" %>>Home</a></li>
   <li><a href="#about" <%= class=\"active\" if @page_tab == "about" %>>About</a></li>
   <li><a href="<%= users_url %>" <%= class=\"active\" if @page_tab == "users" %>>Users</a></li>
</ul>

【讨论】：

我想这就是我想要的。谢谢。
我喜欢这个解决方案，但它似乎不再适用于 Rails 3.2。这不再起作用 - 出现语法错误。

【解决方案2】：

不是这个

$(".nav > li").click(function(){
  $(this).removeClass("active");
  $(this).addClass("active");
});

使用这个

$(".nav > li").click(function(){
  $(".nav > li").removeClass("active"); // this line will remove class active from every li
  $(this).addClass("active");
});

注意-此脚本仅适用于页面不刷新只能在同一页面上使用，而不是在您的情况下不起作用

【讨论】：

【解决方案3】：

您还可以在视图中定义变量，例如

- @active_tab = 'dashboard'

然后在布局模板中执行类似（HAML 版本）的操作：

%ul.nav
  - ['dashboard', 'reports'].each do |tab|
    %li{:class => ('active' if @active_tab == tab)}
      = link_to t('nav_'+tab), send(tab+'_path')

【讨论】：