Seeking assistance with a jQuery issue. When clicking a link in the navbar, I am attempting to change its style (background and font color). Here is the code I am using:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul li a").click(function(){
$(this).addClass("active");
});
});
</script>
The CSS seems correct as hardcoding the class="active" into the HTML displays the desired style. However, upon clicking a link in the navbar, all the links flash in and out of the style instead of just the clicked link. The outcome resembles the CSS :active selector behavior, but all links flash simultaneously.
Below are the relevant HTML elements:
<li><a href="/">Home</a></li>
<li><a href="/repository">Repository</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/bio">Bio</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
Appreciate any assistance or insights. Additionally, I am utilizing Flask and Bootstrap for this project. Any guidance would be valuable as this is my first website endeavor.