Problem to change active state of ul elements via jquery.

Hi

In my layout view, i have ul element with some li as follow :

<ul id="lstItems" class="list-unstyled components"><li class="active"><a href="~/Home/Index"><i class="fa fa-chart-line"></i>
                        Dashboard</a></li><li><a href="~/Patient/Index"><i class="fa fa-user"></i>
                        Patients</a></li><li><a href="~/Visits/Index"><i class="fa fa-pen"></i>
                        Visits</a></li></ul>

As you can see, The first li element has active class. i want to change this state when user click on other li elements. To do this, i've used this jquery code :

$('#lstItems li').on('click', function () {$(this).parent().find('li.active').removeClass('active');$(this).addClass('active');
        });

This code works when i set breakpoint on my browser debugger, but when the page refreshed, it returns back to set first li active!

Where is my problem & how to solve ?

Thanks in advance