I have implemented a small JavaScript code snippet to add a line under links on my website. Here is the code:
$("li").on("click", function() {
$("li").removeClass("line");
$(this).addClass("line");
});.line {
border-bottom: 4px solid #555;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0)">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
</li>
</ul>As you can see, this code adds a line under the selected list item. However, the issue arises when it also adds lines to other lists on the page that I don't want. How can I modify the JavaScript to only add a line under items within the "nav" class?