One method to ensure the active menu link remains displayed correctly is by implementing a unique identifier for each page within your HTML templates. By assigning a specific ID and data attribute to a designated div element, you can easily track the current page using JQuery.

<div id="page-name" data-page="home-page">

To dynamically update the active menu link based on the current page, you can retrieve the stored data with the following code:

var current_page = $("#page-name").data("page");

Subsequently, adjust the class of the menu links accordingly using conditional statements like so:

// Remove "active" class from all menu links
$(".menu li a").removeClass("active");

if (current_page === "home-page") {
    // Add "active" class to desired link
    $("#home-page-link").addClass("active")
}

It's advisable to utilize a switch statement for multiple pages and remember to include the corresponding JS file across all pages. Utilizing the Header template simplifies this process, requiring just a single inclusion. Lastly, ensure consistency in naming conventions for the "data-page" attribute in your HTML markup.

If you want to dynamically add a class to the navigation item of the current page when the page loads, here's how you can achieve it:

1. First, check the URL of the current page:
   $(location).attr('href') OR $(location).attr('pathname')
2. Next, iterate through anchor elements (a) in the navigation menu to see if any of the href attributes match the current page URL using the .indexOf() method with a conditional statement:
   

   if(anchorEl.indexOf(currentPageUrl) >= 0)

3. If there is a match, add the required class using the .addClass() function: $(this).addClass('current');

Check out this code snippet for a visual demonstration:

Please note that this example uses specific URLs to illustrate functionality and is not intended for production environments.

$(document).ready(function () {
    var currentPageUrl = $(location).attr('href'), // store current page url
        anchorEl;
    
    $('.menu a').each(function(){
    
      anchorEl = $(this).attr('href'); // store href attribute of current anchor element
      console.log('anchor link url:',anchorEl);
      console.log('current window url:',currentPageUrl);
    
      if(anchorEl.indexOf(currentPageUrl) >= 0) { 
        $(this).addClass('current');
        console.log('class "current" added.');
      }
    });
});

/* 

Note:
$(location).attr('href') = full absolute path (https://example.com/page)
$(location).attr('pathname') = relative path (/page)

*/

.current {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="list">
    <li>
      <a href="https://example.com/page1">
          <span>Example Page 1</span>
      </a>
    </li>
    <li>
      <a href="https://example.com/page2">
          <span>Example Page 2</span>
      </a>
    </li>
    <li>
      <a href="https://example.com/current-page">
          <span>This should be the <em>current</em> page</span>
      </a>
    </li>
  </ul>
</div>

Have you considered using e.preventDefault()? This function stops the default behavior of an object, such as a redirect in this case. By doing so, you can prevent your application from automatically redirecting to the specified href.

If you want to implement this feature, you can update your code like this:

$(document).ready(function () {
    $('.menu .list a').click(function(e) {

        $('.menu li.active').removeClass('active');

        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();

        // Make the necessary changes here
        location.href = $(this).attr('href');
    });
});

Edit 1: You can follow these steps:

1) Assign a specific class name to each li tag

2) Send the required class name (which should have the active class) after redirection and page load

3) Retrieve the class name passed through the url and add or remove it from your li tags

Your updated html code will look like this:

<div class="menu">
    <ul class="list">
        <li class="header">MAIN NAVIGATION</li>
        <li class="home active">
            <a href="index.php">
                <i class="material-icons">home</i>
                <span>Home</span>
            </a>
        </li>
        <li class="group">
            <a href="test.php">
                <i class="material-icons">group</i>
                <span>Test</span>
            </a>
        </li>
        <li class="people">
            <a href="test2.php">
                <i class="material-icons">people</i>
                <span>Test2</span>
            </a>
        </li>
    </ul>
 </div>

If you need the corresponding script code for this solution, let me know and I'll update my answer.

Edit 2: To make this work, include the following script codes in your file:

function setActiveClass() {
    //Remove active class from all li tags
    $('.menu li.active').removeClass('active');
    //Get the current url
    var url = $(location).attr('href');

    if (url.contains("activeClass")) {
        //Find the index of active class in the url
        var start = url.indexOf("#activeClass");
        //Adjust the end index based on the longest class name ("people" has 6 characters)
        var end = start + 6;
        //Extract the passed class name from the url
        var className = url.substring(start, end);

        //Add the active class based on the passed class name
        if(className.contains("home"))
            $(".home").addClass('active');
        else if(className.contains("group"))
            $(".group").addClass('active');
        else
            $(".people").addClass('active');
    } else {
        //Add the active class in default mode (when there's no redirect yet)
        $("#defaultLiTag").addClass('active');
    }
}

$(document).ready(function () {
    //Call the function
    setActiveClass();

    $('.menu .list a').click(function(e) {
        e.preventDefault();

        var classNameOfParent = $(this).parent().attr('class');

        var classNameToBePassedByUrl = "home";

        if(classNameOfParent.contains("group"))
            classNameToBePassedByUrl = "group";
        else if(classNameOfParent.contains("people"))
            classNameToBePassedByUrl = "people";

        location.href = $(this).attr('href') + "#activeClass=" + classNameToBePassedByUrl;
    });
});

After encountering the same issue and researching extensively, I stumbled upon a helpful solution in the following link. Hopefully, it can assist you as well. It is recommended to remove the "active" class and add it to the clicked navbar item. Using location.href helps to add the active class when the page reloads.

https://example.com/refresh-active-page-jquery/