As I work on developing my website, I am facing an issue that I need help with.
My header is stored in a separate HTML document and it looks like this:
<div class="topnav" id="myTopnav">
<a href="Index.html" id="home"><i class="fa fa-fw fa-home"></i>Home</a>
<a href="Drinks.html" id="drinks"><i class="fa fa-fw fa-coffee"></i>Drinks</a>
</div>
On every page, I load the header using this HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#content').load("Header.html");
});
</script>
</head>
<header class="head">
<div id="content"></div>
</header>
Currently, I am attempting to dynamically add a class to the "a href" tag to make it active, but I am facing issues. I tried creating another function in the "head" tag:
<script>
function addAct() {
var element = document.getElementById("#home");
element.classList.add(".active");
};
</script>
and then manually calling it in the "head" tag right after loading the header:
<script>addAct()</script>
Unfortunately, this approach does not seem to work. I have tried various other solutions but have not found one that resolves the issue. Can anyone provide assistance?
Thank you!