I have a list that looks like this:
<!-- 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>
The first item in the list is initially marked as active. I want to change the active state when a different list element is clicked.
I attempted to do this with the following code:
$('.steps-sampling').on('click','a', function(){
$(this).addClass('active').siblings().removeClass('active');
});
I also tried (adding an id to the anchor tag):
// Set the home menu item as active on initial load
$(".steps-sampling a#link1").addClass("active");
// Remove active class from all list items on click and add it to the clicked item
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});
Unfortunately, neither of these solutions worked.
I found the .active class for nav-link defined in the min.css file, making it difficult for me to customize it further.
.nav-link.active{border-color:#006673}
Since the Bootstrap template I am using does not seem to work well with adding active to the li element, I am unsure how to proceed. Any suggestions?