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.
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
$(".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
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.
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:
<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?
https://guides.rubyonrails.org/working_with_javascript_in_rails.html