html – Correctly setting an active color to navbar

I want to have my navbar in a seperate file and have the current pagelink fromthe navbar set to a specific color.

This is the html I’m using as a “template” for the navbar:

<link rel="stylesheet" href="styles.css">

<div class="topnav" id="mytopnav">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a id="contact" href="contact.html">Contact</a>        
</div>

<script>
    $('#mytopnav').click(function() {
        $("#contact").addClass("active");
    });
</script>

This is the html for the contact page:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="styles.css">

<div id="navbar-placeholder" class="active"></div>

<script>
    $(function() {
        $("#navbar-placeholder").load("navbar.html");
    });
</script>

<h1>This is my contact info</h1>

This works when I click the button but when the page is loaded it goes back to original color (I.e. the button just blink once).

What am I missing in order to make this work as a reusable navbar with coloring for the selected page?

Example of how it should look:
enter image description here

NB: I’ve only set this up to test on the contacts page. The other pages is hardcoded with “their own” navbar.