Mistake in code but I cant find it javascript html css-CodePudding

I want to make a navbar where the active site ist shown 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 is some kind of mistake here because it does not work. I cant do js thats why i copied a code and changed the "nav ul li a.active" things nothing more. I dont know where the mistake is. Pls help 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);
}

CodePudding user response：

You are binding the click to only happen on 'active' elements. Change that block so it is attached to all nav links, not just the 'active' one(s):

           $( "nav ul li a" ).bind( "click", function(event) {
                event.preventDefault();
                var clickedItem = $( this );
                $( "nav ul li a.active" ).each( function() {
                    $( this ).removeClass( "active" );
                });
                clickedItem.addClass( "active" );
            });

CodePudding user response：

This script uses jQuery, a library for javascript

Include this at the top of your <head> if you want it to work:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>