How to stop your navigation bar from resetting to its initial state - php

Question

I am trying to add active styling to the clicked link in the navbar and navigate to another page. But whenever I click on a link, it loads the page but resets the style of navbar. I tried using e.preventDefault, but it only ends up stopping the other pages to load but allows the style to show up on the nav bar. WheBelow are the code snippets
(function (window, document, $, undefined) {
"use strict";
$(document).ready(function () {
$(".c-header-1.-bg-white .c-header-1-nav > ul > li > a").click(function (
e
) {
$(
".c-header-1.-bg-white .c-header-1-nav > ul > li > a.active"
).removeClass("active");
// var $parent = $(this).parent();
$(this).addClass("active");
e.preventDefault();
});
});
})(window, document, jQuery);
/* Enter your custom styles */
#media (min-width: 992px) {
.c-header-1.-bg-white .c-header-1-nav > ul > li > a.active {
color: #0c2840;
}
.c-header-1.-bg-white .c-header-1-nav > ul > li > a.active:before {
background-color: #0c2840;
visibility: visible;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="c-header-1 -bg-white -js-header">
<div class="c-header-1-spacer"></div>
<div class="c-header-1-container">
<div class="c-header-1-inner">
<div class="c-container">
<div class="c-header-1-middle">
<div class="c-header-1-logo">
<img src="assets/img/logo.png" alt="Victoria Property Management Logo">
</div>
<nav class="c-header-1-nav">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="c-header-1-icon-toggle">
<span class="ion-navicon-round"></span>
</div>
<div class="c-header-1-btn">
[phone]
</div>
<div class="c-header-1-btn c-social-1 -color-mixed-simple -hover-mixed-outline -size-small">
<ul class="c-social-1-inner">
<li class="c-social-1-item">
<a class="c-social-1-link -icon-instagram" href="https://www.instagram.com/sierraallegretto/" target="_blank">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
<li class="c-social-1-item">
<a class="c-social-1-link -icon-linkedin" href="https://www.linkedin.com/in/sierraallegretto/" target="_blank">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>