[英]Javascript not executing in rails view partial
我使用了bootstrap navbar,但是我需要在不同的nav-item单击上更改活动类,但是当单击其他nav-item时,活动类不会被应用/添加,它保持静态。
部分视图的一些摘录是->
<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>
所以我试图通过在application.js中编写来实现js,但是没有用
$(".navbar-nav .nav-item").on("click", function(){
$(".navbar-nav").find(".active").removeClass("active");
$(this).addClass("active");
});
我也试过
function change(){
document.getElementById("project-nav").className.replace(" active", "");
document.getElementById("user-nav").className += " active ";
}
但是类没有改变-似乎根本没有执行onclick事件
导致此问题的原因是:
<%= link_to "Project", projects_path, class: "nav-link" %>
还有这个:
<%= link_to "user", users_path, class: "nav-link" %>
因此,当您单击nav-item
它实际上将重定向到projects_path
或users_path
,这取决于您单击的链接。
这段代码:
$(".navbar-nav .nav-item").on("click", function(){
$(".nav-item").not(this).removeClass('active');
$(this).addClass("active");
});
如果您具有以下代码结构,将可以正常工作:
<ul class="navbar-nav mr-auto">
<li class="nav-item"> Project </li>
<li class="nav-item" > User </li>
</ul>
因此,如果要将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');
});
参考文献:
如何获取Twitter-Bootstrap导航以显示活动链接?
https://guides.rubyonrails.org/working_with_javascript_in_rails.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.