在引导菜单中设置当前活动选项卡

Question

我在部分中定义了以下引导菜单（药丸）：

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
</ul>

以下是一些示例路线：

  get 'institute/:institute_id/students' => 'students#index'   , as: 'students_of_institute'
  get 'students/:student_id'             => 'students#show'

我在各种视图中都引用了这个部分。如何动态更改当前活动选项卡？

Answer 1

您必须检查当前路径，如果它与您的链接匹配，请将 active 类添加到您的 li。

比较params[:controller] 和params[:action] 是一种简单的方法。

例如：

# GET /posts
params[:controller]     => "posts"
params[:action]         => "index"

这是一个“肮脏”的例子。最好把它移到某个助手那里：

<ul class="nav nav-pills">

  <li class="<%= 'active' if params[:controller] == 'students' && params[:action] == 'index' %>"><%= link_to 'Students', students_path %></li>

</ul>

Answer 2

@Uzbekjon 解决方案的替代方法是使用 current_page? 辅助方法。第一个参数是控制器，第二个（可选）是动作。

由于您的导航链接将是顶级链接，您通常不需要指定操作。这样，您仍然可以在同一控制器中为子页面提供有效的药丸。

例如：

<ul class="nav nav-pills">
  <li class="<%= 'active' if current_page? controller: :students %>">
    <%= link_to 'Students', students_path %>
  </li>
</ul>

我认为这更优雅一些。