I'm experiencing some issues with the Navbar on my website. I want the active tab to change as users navigate through the different pages.
Since I'm using a base template, I don't want to duplicate the navbar HTML/CSS for each page, so I think JavaScript is the solution to my problem.
I tried using some jQuery code from another source, but it ended up causing a separate issue. I'm not very familiar with jQuery, so I'm finding it challenging to resolve the problem.
Below is the HTML code for the Navbar:
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="{% static 'images/sidespacer.png' %}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a class="nav-link" href="/Spaces">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/Spaces/space">Spaces</a></li>
<li class="nav-item"><a class="nav-link" href="/Spaces/pricing">Prices</a></li>
<li class="nav-item"><a class="nav-link" href="/Spaces/howitworks">How it Works</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
{% if user.is_authenticated %}
<li class="nav-item"><a class="nav-link" href="{% url 'logout' %}">Log out {{user.username}}</a></li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'signup' %}">Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'login' %}">Login</a></li>
{% endif %}
</ul>
</div>
</div>
</nav>
This is the jQuery code I'm currently using:
$(document).ready(function() {
$( ".nav-item" ).bind( "click", function(event) {
event.preventDefault();
var clickedItem = $( this );
$( ".nav-item" ).each( function() {
$( this ).removeClass( "active" );
});
clickedItem.addClass( "active" );
});
});
While this jQuery code changes the active state, it prevents the user from being directed to the link.
Thank you for your help in advance,