Question

在我的非高压页面上，我使用以下代码添加＆＃34;有效＆＃34;如果用户在页面上，则为class导航元素：<li class="<%= 'active' if params[:controller] == 'home' %>"><a href="/">Home</a></li>

为我的high_voltage页面执行此操作的等效方法是什么（我希望li上的活动类）？

<li class="nav-item"><%= link_to 'Plans', page_path("plans") %></li>

Answer 1

我最终得到了这个：

<li class="nav-item <%= 'active' if page_path == '/about' %>"><%= link_to "About", page_path("about") %></li>

高电压提供page_path方法链接到页面。我可以使用它来确定我是否在该页面上，或者不像我对控制器那样。

Answer 2

您可以在page_path

中使用high_voltage的current_page?功能

<li class='<%="active" if current_page?page_path('about') %>'>About</li>
<li class='<%="active" if current_page?page_path('contact') %>'>Contact</li>

Answer 3

由于它是静态页面，您可以直接在HTML代码中编写它：

<li class="active nav-item"><%= link_to 'Plans', page_path("plans") %></li>

Answer 4

还有另一种解决方案可以使条件逻辑远离您的视图，并使用纯CSS来标记您的活动导航项。它可以与您的所有视图一起使用，包括high_voltage页面。

module ApplicationHelper
  def body_class
    "#{controller_name} #{controller_name}-#{controller.action_name} #{params['id']}"
  end

  def controller_name
    controller.controller_path.gsub('/','-')
  end
end

从布局中调用辅助方法

<body class="<%= body_class %>">

这会在PagesController#show id=plans

上为您提供类似这样的正文类

<body class="pages pages-show plans">

导航的html看起来像这样

<ul class="nav-items">
  <li class="home">Home</li>
  <li class="plans">Plans</li>
  <li class="contact">Contact</li>
</ul>

然后，您可以使用CSS来定位您想要激活的导航项

body.home li.home,
body.plans li.plans,
body.contact li.contact {
  // styles for active item
}

Rails：如何在导航中向高压页面添加活动类

4 个答案: