[英]Javascript not executing in rails view partial
I used bootstrap navbar , but I need to change the active class on different nav-item click, but the active class is not being applied/added when other nav-item is clicked , it stays static. 我使用了bootstrap navbar,但是我需要在不同的nav-item单击上更改活动类,但是当单击其他nav-item时,活动类不会被应用/添加,它保持静态。
some extract of partial view is-> 部分视图的一些摘录是->
<nav class="navbar navbar-expand navbar-light fixed-top" id="topheader">
<section class="container d-flex">
<span class="navbar-brand mb-0 h1 a">Project Manager</span>
<ul class="navbar-nav mr-auto">
<li class="nav-item active" id="project-nav" onclick= "change2()">
<%= link_to "Project", projects_path, class: "nav-link" %>
</li>
<li class="nav-item" id="user-nav" onclick= "change()">
<%= link_to "user", users_path, class: "nav-link" %>
</li>
</ul>
so I tried to implement js by writing in application.js , but it didn't work 所以我试图通过在application.js中编写来实现js,但是没有用
$(".navbar-nav .nav-item").on("click", function(){
$(".navbar-nav").find(".active").removeClass("active");
$(this).addClass("active");
});
I also tried 我也试过
function change(){
document.getElementById("project-nav").className.replace(" active", "");
document.getElementById("user-nav").className += " active ";
}
But the class is not changing- it seems that the onclick event is not being executed at all 但是类没有改变-似乎根本没有执行onclick事件
What is causing the issue is this: 导致此问题的原因是:
<%= link_to "Project", projects_path, class: "nav-link" %>
and also this: 还有这个:
<%= link_to "user", users_path, class: "nav-link" %>
So, when you click on the nav-item
it will actually redirect to projects_path
, or users_path
, it depends on which link you clicked. 因此,当您单击
nav-item
它实际上将重定向到projects_path
或users_path
,这取决于您单击的链接。
This code: 这段代码:
$(".navbar-nav .nav-item").on("click", function(){
$(".nav-item").not(this).removeClass('active');
$(this).addClass("active");
});
Will working if you have this code structure: 如果您具有以下代码结构,将可以正常工作:
<ul class="navbar-nav mr-auto">
<li class="nav-item"> Project </li>
<li class="nav-item" > User </li>
</ul>
So, if you want to add the class active
only to the active link in the navbar, you can do this: 因此,如果要将
active
类仅添加到导航栏中的活动链接,则可以执行以下操作:
<nav class="navbar navbar-expand navbar-light fixed-top" id="topheader">
<section class="container d-flex">
<span class="navbar-brand mb-0 h1 a">Project Manager</span>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<%= link_to "Project", projects_path, class: "nav-link" %>
</li>
<li class="nav-item" >
<%= link_to "user", users_path, class: "nav-link" %>
</li>
.....
</ul>
</section>
</nav>
$(document).on("turbolinks:load", function () {
$('.nav-item a[href="' + this.location.pathname + '"]').parent().addClass('active');
});
References: 参考文献:
How to get Twitter-Bootstrap navigation to show active link? 如何获取Twitter-Bootstrap导航以显示活动链接?
https://guides.rubyonrails.org/working_with_javascript_in_rails.html https://guides.rubyonrails.org/working_with_javascript_in_rails.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.