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?辅助方法。第一个参数是控制器，第二个参数是操作。

由于您的导航链接将是顶级链接，因此您通常无需指定操作。这样，您仍然可以在同一个控制器中使用子页面的活动药丸。

E.g：

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

我认为这稍微优雅一点。

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

2 个答案: