Add active class to nav menu on click of link

Question

I am developing a web page wherein I have header(containing the navigational menu) in separate html file say reusableheader.html and footer in separate file ie reusablefooter.html.

reusableheader.html:

<style>
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
  color: #3fbbc0;
  border-color: #3fbbc0;
}
</style>

<script>
         $(function(){
          var current_page_URL = location.href;
          $( "a" ).each(function() 
          {
             if ($(this).attr("href") !== "#") 
             {
               var target_URL = $(this).prop("href");
               if (target_URL == current_page_URL) 
               {
                  $("a").parent("li").removeClass("active");
                  $(this).parent("li").addClass("active");
                  return false;
               }
             }
          });
        });   
</script> 

<nav class="nav-menu d-none d-lg-block"> //set to fixed-top.
        <ul>
          <li class="active"><a class="nav-link" href="/hospital/">Home</a></li>
          <li><a class="nav-link" href="/hospital/aboutus">About</a></li>
          <li><a class="nav-link" href="/hospital/services">Services</a></li>
          <li><a class="nav-link" href="/hospital/departments">Departments</a></li>
          <li><a class="nav-link" href="/hospital/doctors">Doctors</a></li>
          <li class="drop-down"><a class="nav-link" href="#">Reach Us</a>
            <ul>
              <li><a class="nav-link" href="/hospital/contact">Contact Us</a></li>
              <li><a class="nav-link" href="#">Feedback</a></li>
              <li><a class="nav-link" href="#">Blogs</a></li>
              <li><a class="nav-link" href="#">Newsletters</a></li>
            </ul>
          </li>
        </ul>
      </nav><!-- .nav-menu -->

I am including the below javascript code in all my other web pages:

otherpages.jsp

<script>
    $(function() {
        $("#header").load("reusableheader.html");
     });
</script>

The above code works fine ie on click of link on the menu item, its becomes the active link with the color assigned(in css) but when I scroll the page down, the activeness shifts from currently active link back to the "home" link. What am I doing wrong here?

Answer 1

I think the problem is with removing the active class on the li element. How can you say $("a").parent("li").removeClass("active"); when you have got so many a elements with parent li element.

Instead, create a new for loop function which removes the element if the active class is found regardless of wherever it is in the list. And also add the logic on the click event of the li element, otherwise, it keeps looking for a URL match and changes it and would behave oddly if any path gets appended to the URL.

function removeClass() {
    var listItems = $(".nav-menu > ul > li");
    listItems.each(function (idx, li) {
        $(li).removeClass("active");
    });
}