[英]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.