how can I add javascript or Jquery to my navbar-CodePudding

I am trying to add js to my navbar, I want to make it like if I click another button, the class of that button become 'active', and the others become normal one

<ul>
<li><a  href="">Home</a></li>
<li><a  href="">Semester</a></li>
<li><a  href="">Course</a></li>
<li><a  href="">Class</a></li>
<li><a  href="">Lecturer</a></li>
<li><a  href="">Student</a></li>
<li><a  href="">Student Attendance</a></li>

CodePudding user response：

$(document).ready(function() {
  $(".nav-link").click(function () {
        $(".nav-link").removeClass("active");
        $(this).addClass("active");
    });
});

CodePudding user response：

do this

$(document).ready(function() {
  $(".nav-link").click(function () {
        $(this).addClass("active").siblings().removeClass('active');
    });
});