Change the active class in nav li

Question

My code is changing active class already but its not redirecting to its respective page that need. It's only changing active class.

Javascript:

 <script type="text/javascript">
        $(document).ready(function() {
            $("li").click(function(event) {
                event.preventDefault();
                if ($("li").hasClass('active')) {
                    $("li").removeClass('active');
                }
                $(this).addClass('active');
            });
        });
    </script>

HTML:

<div id="nav">
            <h1 class="bar bar-dark bar-no-shadows">Logic Call Suite <small>v3.0</small></h1>
            <ul>
                <li id="_dashboard" class="active">
                    <div class="nav-icon"><i class="icon-home"></i></div>
                    <div class="nav-content">
                        <a href="../Dashboard.aspx">
                            Dashboard <span>Your LCS Dashboard</span>
                        </a>
                    </div>
                </li>
                <li id="_admin">
                    <div class="nav-icon"><i class="icon-pencil"></i></div>
                    <div class="nav-content">
                        <a href="../Administration.aspx">
                            Admin Modules <span>Manage admin modules</span>
                        </a>
                    </div>
                </li>   
                <li id="_system">
                    <div class="nav-icon"><i class="icon-cog"></i></div>
                    <div class="nav-content">
                        <a href="../Maintenance.aspx">
                            Maintenance Modules <span>Manage Maintenance modules</span>
                        </a>
                    </div>
                </li>                   
                <li id="_reports">
                    <div class="nav-icon"><i class="icon-file"></i></div>
                    <div class="nav-content">
                        <a href="../Reports.aspx">
                            Reports <span>Report generation module</span>
                        </a>
                    </div>
                </li>       
                <li id="_logout">
                    <div class="nav-icon"><i class="icon-lock"></i></div>
                    <div class="nav-content">
                        <a href="../Login.aspx">
                        Logout <span>Session Logout</span></a>
                    </div>
                </li>                                       
            </ul>
        </div>

Answer 1

It is because you are calling event.preventDefault(), which prevents the default action of the click of the anchor element, which is to load the targeted page.

In your case since you are loading a new page on click of the anchor element, there is no use to change the class on the click event because when the new page loads the current dom structure will get destroyed and the class you assigned will not get persisted.

Instead you can use a path match on page load and mark the li having the current page url as the source as current page.

jQuery(function ($) {
    //remove the default active class, may not required if you can remove the active class assignment to the dashboard item
    $('#nav li.active').removeClass('active');
    //get the current page url(the last part of the url)
    var page = window.location.href.match(/[^/]+$/)[0];
    //then fine the li having the anchor with that url and add the class
    $('#nav li a[href$="' + page + '"]').closest('li').addClass('active');
});

Answer 2

Please remove

event.preventDefault();

from your code. it is blocking the default action