javascript - 基于当前选定选项卡的动态导航栏突出显示
问题描述
我正在使用 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”方式),但它不起作用。该函数在 myapplication_helper.rb
中,我在导航栏中添加了对它的函数调用(如上所示):
module ApplicationHelper
def is_active(action)
params[:action] == action ? "active" : nil
end
end
也许我正在以错误的方式解决这个问题,但是有人可以提出一种active
在 Rails 中结合导航栏样式的简单方法吗?
解决方案
您可以使用current_page?
来设置活动类。您可以在以下位置创建一个方法app/helpers/application_helper.rb
:
def active_class(path)
"active" if current_page?(path)
end
你可以像这样使用它:
<li class="<%= active_class(welcome_index_path) %>">
current_page?
active
如果当前请求 URI 是由path
参数生成的,将返回 true 并设置类。
current_page?
您可以在此处阅读更多信息。
推荐阅读
- c# - 元组列表到该元组列表中的第一个元素列表 C#
- javascript - 键盘导致模态消失 React-Native
- wordpress - 为什么我只在 Edge 浏览器中通过 fetch 收到 400 个错误请求?
- java - 对于获得异常 Null_Pointer_Exception 的 Flipkart 项目
- r - dplyr 将“尾”行折叠成更大的组
- node.js - 猫鼬 - 人口密集的精益
- python - Python海龟颜色没有正确填充
- typescript - Ionic 将 Video URI 转换为 File 对象以上传到 Firebase
- ansible - Ansible-Playbook:ntpstat
- sql - BigQuery 标准 SQL 从时间戳返回不同的 WEEK