I need help creating a navbar that displays the active site using HTML and JS code:
<!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">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/style.css">
<title>ANKAR - Website Version</title>
</head>
<body>
<div class="banner">
<nav>
<h4 class="logo">ANKAR</h4>
<ul class="nav-links">
<li><a class="active" href="#">Home</a></li>
<li><a href="#page2">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
</ul>
<div class="burger">
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
</div>
</nav>
<section class="front_page">
<div class="heading">
<h1>ANKAR</h1>
<p>Where do you want to go, Pawel?</p>
<div class="cta">
<button class="star_wars">Star Wars</button>
<button class="ld">Lucid Dreaming</button>
<button class="ba">Add pls</button>
</div>
</div>
</section>
</div>
<script src="../static/java_file.js"></script>
<script>
$(document).ready(function() {
$( "nav ul li a.active" ).bind( "click", function(event) {
event.preventDefault();
var clickedItem = $( this );
$( "nav ul li a.active" ).each( function() {
$( this ).removeClass( "active" );
});
clickedItem.addClass( "active" );
});
});
</script>
</body>
</html>
There seems to be an issue with the code as it is not functioning properly. I am not proficient in JavaScript so I have tried modifying the code by changing the "nav ul li a.active" components but it still doesn't work. Can someone please provide some guidance?
CSS:nav ul li a.active::after {
background: linear-gradient(90deg, grey 30%, #fff 0%, #fff 80%);
content: "";
height: 3px;
width: 100%;
position: absolute;
left: 0;
bottom: -10px;
box-shadow: 15px 0px 5px 2px rgba(0,255,255,1);
clip-path: inset(-10px -0.5px -10px 2px);
}