I have the following list:
<!-- List -->
<ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling">
<li class="nav-item">
<a class="nav-link active" id="link1" href="{{ url_for('overview') }}">
<i class="bi-list-check nav-icon"></i>Overview
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('upload') }}">
<i class="bi-file-arrow-up nav-icon"></i> Upload file
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('choose_numeric') }}">
<i class="bi-sort-numeric-down nav-icon"></i> Choose the numeric column
</a>
</li>
</ul>
It starts with the first list element as active. I want to change the active state based on the list element which is clicked.
I tried:
$('.steps-sampling').on('click','a', function(){
$(this).addClass('active').siblings().removeClass('active');
});
And (added id to anchor tag)
//on first time load set the home menu item active
$(".steps-sampling a#link1").addClass("active");
//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});
But both do not work.
This is the .active class I could find for nav-link. I only have access to the min.css so it is kind of hard to find (not sure if this is sufficient)
.nav-link.active{border-color:#006673}
I cannot add active to the li element since it does not seem to work with the Bootstrap template I am using.
How can I solve this?
Your code works well ,Except for styling ,
Just try to force style using !important to overide default bootstrap style
See below snippet :
$('.steps-sampling').on('click','a', function(){
$(this).addClass('active').siblings().removeClass('active');
});
//on first time load set the home menu item active
$(".steps-sampling a#link1").addClass("active");
//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});.active {
color:green !important;
font-weight:bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- List -->
<ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling">
<li class="nav-item">
<a class="nav-link active" id="link1" href="#">
<i class="bi-list-check nav-icon"></i>Overview
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-file-arrow-up nav-icon"></i> Upload file
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-sort-numeric-down nav-icon"></i> Choose the numeric column
</a>
</li>
</ul>Every time you set a function as listener to an event, when it fires it passes the event object to the function, you can just use it to know on which element the user has clicked:
$("a").click(function(evt){
$("a").removeClass("active");
$(evt.target).addClass("active");
});
I would like to suggest a more correct approach, with the same result:
$("a").on("click", function(evt){
$("a").removeClass("active");
$(evt.target).addClass("active");
});
Sometimes, depending on what you put inside the element that has the event bound, evt.target can be an element different from the one you bound the event on, so you must ensure that the element you style with the class is the correct one:
$("a").on("click", function(evt){
$("a").removeClass("active");
let tgt=evt.target;
if(!$(tgt).is("a")) tgt = $(tgt).closest("a");
$(tgt).addClass("active");
});
After searching other solutions I found this which works.It has to do with the fact that the page is refreshed and is set back to active on the first element:
<script>
$(document).ready(function() {
$('a.active').removeClass('active');
$('a[href="' + location.pathname + '"]').closest('a').addClass('active');
});
</script>