Как изменить тег li при нажатии на него

Я хочу изменить функцию класса li как «активную» при нажатии на нее. Когда это происходит, открывается новая страница, и класс li становится активным. Например, страницу можно открыть с помощью тега «Обзор», как определено li. Когда я нажимаю любой из тегов, новая страница может быть открыта с активным тегом li. Я пытаюсь написать несколько кодов, но не могу изменить актив li.

Вот мои коды, показанные ниже.

Домашняя страница

<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>

Страница пользователя.

<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-код

<script>
    // Nav bar change active status
    $(".nav li").on("click", function() {
        $(".nav li").removeClass("active");
        $(this).addClass("active");
    });
</script>

Я говорю, чтобы изменить активный

<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>

<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;
}