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>        

    $('#mytopnav').click(function() {

This is the html for the contact page:

<script src=""></script>
<link rel="stylesheet" href="styles.css">

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

    $(function() {

<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.