Question

我有一个简单的导航栏：

<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"是否有适当的轨道方式来做到这一点？

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

Answer 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>

Answer 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");
});

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

Answer 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')

如何在导航栏位于应用程序模板中时将标签设置为活动状态？

3 个答案: