Whenever I click on a tag, I want the li class to change to "active" and open a new page with the corresponding tag as active. For example, if I click on the Overview tag, the new page should open with the li tag as active. I have attempted to write some code to achieve this, but I have been unsuccessful in changing the active status of the li element.
Below are the code snippets I have used.
Home Page
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="index.jsp">Overview</a></li>
<li><a href="list_users">Users</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Books</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="#">Customers</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Orders</a></li>
</ul>
</div>
User Page.
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="index.jsp">Overview</a></li>
<li><a href="list_users">Users</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Books</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Customers</a></li>
<li><a href="">Reviews</a></li>
<li><a href="">Orders</a></li>
</ul>
</div>
Javascript code
<script>
// Nav bar change active status
$(".nav li").on("click", function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
});
</script>
The issue I am facing is that the Javascript code is not working as expected. When I click on any item, the active status of the li does not change.
On the Home Page, it should normally display like this:
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="index.jsp">Overview</a></li>
<li class="active"><a href="list_users">Users</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Books</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Customers</a></li>
<li><a href="">Reviews</a></li>
<li><a href="">Orders</a></li>
</ul>
</div>
But currently, it actually appears like this:
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="index.jsp">Overview</a></li>
<li><a href="list_users">Users</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Books</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Customers</a></li>
<li><a href="">Reviews</a></li>
<li><a href="">Orders</a></li>
</ul>
</div>
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
I am seeking help to resolve the issue with the Javascript code not working as expected. How can I fix this problem?