Fatal编程技术网
  • javascript/
  • Javascript 基于当前选定选项卡的动态导航栏高亮显示

Javascript 基于当前选定选项卡的动态导航栏高亮显示

javascript html css ruby-on-rails

Javascript 基于当前选定选项卡的动态导航栏高亮显示,javascript,html,css,ruby-on-rails,Javascript,Html,Css,Ruby On Rails,我使用的是Rails，我有一个引导导航栏。我需要这样做，根据您单击的导航栏选项卡（主页、OOTD、帐户），它将以某种方式突出显示它（如白色文本）。我尝试使用active动态地让它工作，甚至使用一个应该切换它的函数，但它不工作 Myapplication.html.erb，其中包含我的导航栏： <!DOCTYPE html> <html> <head> <title>Finalproj493</title> <%

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

My
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>
也许我这样做是错误的，但是有人能建议一种简单的方法，将
活动的
导航栏样式合并到Rails中吗？
您可以使用
当前页面？
来设置活动类。您可以在
app/helpers/application\u helper.rb
中创建一个方法：


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


您可以这样使用它：


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



  • 

    • 

    current\u页面？
    将返回true，如果当前请求URI是由
    path
    参数生成的，则将
    设置为active
    类
    
您可以阅读有关当前页面的更多信息。
    

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