I’m pretty new to everything, especially JavaScript.
I have a navbar and when I click on one of the links it should have the class active and also change colour, to show everyone who browses the page, where they are, pretty normal and typical website navigation stuff. My navbar is also loaded on every page with JavaScript and jQuery, maybe that is an issue here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>navbar</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="css/stylesheet.css" />
<script src="https://code.jquery.com/jquery-3.6.3.js"
integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-sm navbar-dark shadow p-3 mb-5 rounded">
<div class="container">
<a href="./index.html" class="navbar-brand mb-0 h1" style="font-size: x-large; color: cornsilk">guapo.
<img class="d-inline-block align-top" src="images/clementine.png" width="38" height="38" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span><i id="menu-icon" class="bi bi-list"></i></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarNav" style="color: cornsilk">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a href="gefilterte-produkte.html?category=pflanzen" class="nav-link active"
id="pflanzen">Pflanzen</a>
</li>
<li class="nav-item">
<a href="gefilterte-produkte.html?category=toepfe" class="nav-link" id="toepfe">Töpfe</a>
</li>
<li class="nav-item">
<a href="gefilterte-produkte.html?category=pflanzenfreunde" class="nav-link"
id="pflanzenfreunde">Pflanzenfreunde</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item me-3">
<a href="login.html" class="navbar-link">
<i class="bi bi-person-fill"></i>
</a>
</li>
<li class="nav-item me-3">
<a href="einkaufswagen.html" class="navbar-link">
<i class="bi bi-cart2"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
this is my html for the navbar.
$("#navbar").load("../Frontend/navbar.html .navbar");
this is how my navbar is loaded on every page.
I have tried a lot of JavaScript codes but nothing seems to be working, I just cannot figure it out.