基于当前选定选项卡的动态导航栏突出显示答案

【问题标题】：Dynamic nav bar highlighting based on current selected tab基于当前选定选项卡的动态导航栏突出显示
【发布时间】：2020-04-15 20:20:01
【问题描述】：

我正在使用 Rails，并且我有一个 Bootstrap 导航栏。我需要这样做，以便根据您单击的导航栏选项卡（主页、OOTD、帐户），它会以某种方式突出显示它（如白色文本）。我尝试使用active 甚至是一个应该切换它的函数来动态地让它工作，但它不起作用。

我的application.html.erb，其中包含我的导航栏：

<!DOCTYPE html>
<html>
  <head>
    <title>Finalproj493</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="width: 100%; height: 5vw;">
    <ul class="navbar-nav mr-auto nav">
      <li class="nav-item">
        <a class="nav-link" href="/welcome/index">Home</a>
      </li>
      <li class="nav-item 1">
        <a class="nav-link" href="/ootd">OOTD</a>
      </li>
      <li class="nav-item 2">
        <a class="nav-link" href="/account">Account</a>
      </li>
    </ul>
    </nav>

    <br>
    <br>

    <%= yield %>
  </body>
</html>

我试图使用is_active() 函数来动态切换（“Rails”方式），但它不起作用。该函数在我的application_helper.rb 中，我在导航栏中添加了对它的函数调用（如上所示）：

module ApplicationHelper

    def is_active(action)       
        params[:action] == action ? "active" : nil        
    end
end

也许我的做法是错误的，但有人可以提出一种简单的方法，将 active 导航栏样式合并到 Rails 中吗？

【问题讨论】：

标签： javascript html css ruby-on-rails

【解决方案1】：

您可以使用current_page? 设置活动类。你可以在app/helpers/application_helper.rb创建一个方法：

def active_class(path)
 "active" if current_page?(path)
end

你可以这样使用它：

<li class="<%= active_class(welcome_index_path) %>">

如果当前请求 URI 是由 path 参数生成的，current_page? 将返回 true 并设置 active 类。

你可以阅读更多关于current_page?here的信息。

【讨论】：