gpt4 book ai didi

javascript - 基于当前所选选项卡的动态导航栏突出显示

转载 作者:行者123 更新时间:2023-12-02 21:05:25 25 4
gpt4 key购买 nike

我正在使用 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 中吗?

最佳答案

您可以使用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 .

关于javascript - 基于当前所选选项卡的动态导航栏突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61237904/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com