how can toggle the active class on sidebar menu when it's clicked and page reloads

how can toggle the active class on sidebar menu when it's clicked and page reloads

i am trying the add and remove active class on sidebar menu, in such a way that when user select a particular link it should be active until another one selected 

HTML
<ul class="sidebar-menu">
        <li class="header">MAIN MENU</li>
        <li class="treeview">
            <a href="../AdUserATTENDANCE/Welcome.aspx">
                <i class="fa fa-dashboard"></i><span>MY DASHBOARD</span> <i class="fa fa-angle-left pull-right"></i>
            </a>
        </li>

        <li class="treeview">
            <a href="#">
                <i class="fa fa-folder"></i><span>ATTENDANCE</span><i class="fa fa-angle-left pull-right"></i>
            </a>

            <ul class="treeview-menu">
                <li><a href="../AdUserATTENDANCE/Attendancemark.aspx"><i class="fa fa-circle-o"></i>Attendance Signin</a></li>
                <li><a href="../AdUserATTENDANCE/Attendancesignout.aspx"><i class="fa fa-circle-o"></i>Attendance SignOut</a></li>
                <li><a href="../AdUserATTENDANCE/xStaffAttendanceAnalysis.aspx"><i class="fa fa-circle-o"></i>Attendance Status Review</a></li>
                <li><a href="../AdUserATTENDANCE/StaffAttendanceAnalysis.aspx"><i class="fa fa-circle-o"></i>Attendance Analysis Report </a></li>

            </ul>
        </li>

        <li class="treeview">
            <a href="#">
                <i class="fa fa-folder"></i><span>EMPLOYEE PROFILE</span><i class="fa fa-angle-left pull-right"></i>
            </a>

            <ul class="treeview-menu">
                <li><a href="../AdUser/EmployeeRecords.aspx"><i class="fa fa-circle-o"></i>Employee Details</a></li>
                 <li><a href="../AdUser/changepwd.aspx"><i class="fa fa-circle-o"></i>Change Access Password</a></li>

            </ul>
        </li>
</ul>


JS

<script type="text/javascript">
    $(function () {

        var menu_ul = $('.sidebar-menu > li > ul'),
     menu_a = $('.sidebar-menu > li > a');

        menu_ul.hide();

        menu_a.click(function (e) {
            e.preventDefault();
            if (!$(this).hasClass('active')) {
                menu_a.removeClass('active');
                menu_ul.filter(':visible').slideUp('normal');
                $(this).addClass('active').next().stop(true, true).slideDown('normal');
            } else {
                $(this).removeClass('active');
                $(this).next().stop(true, true).slideUp('normal');
            }
        });
    });

</script>