I have a navbar whose "a" links redirect to different pages. I wanted to have a navbar with active link underlined. But when i click on other links it opens other pages and also excutes js function but again it goes back to scratch(Underlines very first link even though other link is active.) I am including the navbar.html in all the pages using include tag and have a single common css and js file for all html pages.
JS
$('.nav-link').on('click', function() {
$('.active-link').removeClass('active-link');
$(this).addClass('active-link');
});
HTML
<div class="navbar-container py-0">
<ul>
<li class="nav-link active-link">
<a class="mb-sm-1 mb-md-0 p-1 pr-3 fs-6"
href="{% url 'screen_1' screen.id %}">
Screen 1
</a>
<div class="underline"></div>
</li>
<li class="nav-link">
<a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6"
href="{% url 'screen_2' screen_2.id %}">
Screen 2
</a>
<div class="underline"></div>
</li>
<li class="nav-link">
<a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6"
href="{% url 'screen_3' screen_3.id %}">
Screen 3
</a>
<div class="underline"></div>
</li>
</ul>
</div>
CSS
a {
outline: none;
}
.navbar-container {
font-size: 0;
}
.navbar-container ul {
margin: 0;
padding: 0;
text-align: right;
display: inline-block;
vertical-align: middle;
}
.navbar-container ul li {
display: inline-block;
font-size: 1rem;
}
.navbar-container ul li a {
color: #000000;
text-decoration: none;
display: inline-block;
transition: color 0.5s;
}
.navbar-container ul li .underline {
height: 3px;
background-color: transparent;
width: 0%;
transition: width 0.2s, background-color 0.5s;
margin: 0 auto;
}
.navbar-container ul li.active-link .underline {
width: 100%;
background-color: #0c0c0c;
}
.navbar-container ul li:hover .underline {
background-color: #000000;
width: 100%;
}
.navbar-container ul li:hover a {
}
.navbar-container ul li:active a {
transition: none;
color: rgb(12, 12, 12);
}
.navbar-container ul li:active .underline {
transition: none;
background-color: rgb(0, 0, 0);
}
Javascript is executed on page-load without a "memory" what it did before the load.
So if you click the link on your first page, the click triggers a link to your new page. When this page loads, all modifications you did with javascript are gone. The page won't know, what link you clicked before and the original active link will be active.
This might be different when using SPA with React or Vue, but with VanillaJS that's the way browsers work
To get the active link, you could check what link-href the current url matches via window.location.href.
I think you need to add js code for each html page to automatically add the active-link class to the li tag.
For example:
This is the navigation bar code:
<div class="navbar-container py-0">
<ul>
<li id="screen_1" class="nav-link">
<a class="mb-sm-1 mb-md-0 p-1 pr-3 fs-6"
href="{% url 'screen_1' screen.id %}">
Screen 1
</a>
<div class="underline"></div>
</li>
<li id="screen_2" class="nav-link">
<a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6"
href="{% url 'screen_2' screen_2.id %}">
Screen 2
</a>
<div class="underline"></div>
</li>
<li id="screen_3" class="nav-link">
<a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6"
href="{% url 'screen_3' screen_3.id %}">
Screen 3
</a>
<div class="underline"></div>
</li>
</ul>
</div>
I have removed the active-link class for all li tags and created 3 different id for each.
Now for each of the screen 1, screen 2 and screen 3 html pages, simply add a code to set the active-link class for the corresponding nav-link.
For example in screen 1 html page:
$("#screen_1").addClass("active-link");