I am trying to use jQuery to underline the currently selected link in my navbar, the code here: https://jsfiddle.net/9bkh4w8s/1/ is working(you have to expand the output). The code below is not:
html (href values were set to '#' in jsfiddle, here they have actual values):
<nav class="navbar">
<a class="navbar-brand" href="{% url 'index' %}">JobBoard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated == False %}
<li class="nav-item active">
<a class="nav-link right-link" href="% url 'index' %}">Job Search<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'employer_signup' %}">Post a Job<span class="sr-only">(current)</span></a>
</li>
</ul>
{% endif %}
<!-- set of links to be displayed if user is logged in intentionally omitted-->
</nav>
css (same as jsfiddle):
.active{
position:relative;
}
.active:after{
content:'';
position:absolute;
width:100%;
height:1px;
background:#000;
left:0;
top:100%;
margin-top:.5rem;
}
jquery (same as jsfiddle):
$(document).ready(function(){
$('li').click(function(){
$('li').removeClass('active');
$(this).addClass('active');
})
});
When I click the 'Post Job' link:
<a class="nav-link" href="{% url 'employer_signup' %}">Post a Job<span class="sr-only">(current)</span></a>
It takes me to right page but the 'Job Search' link remains underlined and not the 'Post Job' link. The only difference between this and the jsfiddle is that I am actually being brought to a new page. Does anyone know why this ceases to work when href has an actual value?
